Web Style Guide
Gloria Dei Lutheran | three
Login Sunday Bulletin Give

Triumph Swiper

Easily create carousels and slideshows with the Swiper JS shortcode from Triumph Tech. Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

Table of Contents
  1. Default
  2. Primary
  3. Secondary

Default



            
{[ swiper shownavigation:'true' ]}
    [[ slide ]]
        <img src="https://picsum.photos/seed/1/1600/500" class="w-100 img-responsive">
    [[ endslide ]]
    [[ slide ]]
        <img src="https://picsum.photos/seed/1/1600/500" class="w-100 img-responsive">
    [[ endslide ]]
    [[ slide ]]
        <img src="https://picsum.photos/seed/1/1600/500" class="w-100 img-responsive">
    [[ endslide ]]
{[ endswiper ]}

Primary

alt
title

From October 25 to November 2, 2024

alt
title

From October 25 to November 2, 2024

alt
title

From October 25 to November 2, 2024

alt
title

From October 25 to November 2, 2024

Primary – Smoky Emerald

alt
title

From October 25 to November 2, 2024

alt
title

From October 25 to November 2, 2024

alt
title

From October 25 to November 2, 2024

alt
title

From October 25 to November 2, 2024


The GloriaDeiV1 theme has many theme color options. Simply add the color name in css class syntax (Misty Moss => misty-moss) to the containerclass shortcode attribute to apply the color as this swipers accent color.


        
{[ swiper shownavigation:'true' showpagination:'true' containerclass:'primary' breakpoints:'768-2|16,992-1|16,1200-2|16' spacebetween:'16' ]}
    [[ slide ]]
        <div class="card card-short">
            <img src="https://via.placeholder.com/800x380" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h5 class="card-title">title</h5>
                <p>From October 25 to November 2, 2024</p>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="card card-short">
            <img src="https://via.placeholder.com/800x380" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h5 class="card-title">title</h5>
                <p>From October 25 to November 2, 2024</p>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="card card-short">
            <img src="https://via.placeholder.com/800x380" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h5 class="card-title">title</h5>
                <p>From October 25 to November 2, 2024</p>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="card card-short">
            <img src="https://via.placeholder.com/800x380" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h5 class="card-title">title</h5>
                <p>From October 25 to November 2, 2024</p>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    [[ endslide ]]

{[ endswiper ]}


<h3 class="mt-5 pt-5">Primary – Smoky Emerald</h3>

{[ swiper shownavigation:'true' showpagination:'true' containerclass:'primary smoky-emerald' breakpoints:'768-2|16,992-1|16,1200-2|16' spacebetween:'16' ]}
    [[ slide ]]
        <div class="card card-short">
            <img src="https://via.placeholder.com/800x380" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h5 class="card-title">title</h5>
                <p>From October 25 to November 2, 2024</p>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="card card-short">
            <img src="https://via.placeholder.com/800x380" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h5 class="card-title">title</h5>
                <p>From October 25 to November 2, 2024</p>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="card card-short">
            <img src="https://via.placeholder.com/800x380" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h5 class="card-title">title</h5>
                <p>From October 25 to November 2, 2024</p>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="card card-short">
            <img src="https://via.placeholder.com/800x380" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h5 class="card-title">title</h5>
                <p>From October 25 to November 2, 2024</p>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    [[ endslide ]]

{[ endswiper ]}

Secondary

Secondary – Cavern


The GloriaDeiV1 theme has many theme color options. Simply add the color name in css class syntax (Misty Moss => misty-moss) to the containerclass shortcode attribute to apply the color as this swipers accent color.


        
{[ swiper shownavigation:'true' showpagination:'false' containerclass:'secondary' slidesperview:'2' breakpoints:'768-3|16,1200-4|16' spacebetween:'16' ]}
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/400/600" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/300/600" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/300/600" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/800/800" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/400/600" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/400/600" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/400/600" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/400/600" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
{[ endswiper ]}

<h3 class="mt-5">Secondary – Cavern</h3>

{[ swiper shownavigation:'true' showpagination:'false' containerclass:'secondary cavern' slidesperview:'2' breakpoints:'768-3|16,1200-4|16' spacebetween:'16' ]}
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/400/600" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/300/600" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/300/600" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/800/800" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/400/600" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/400/600" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/400/600" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
    [[ slide ]]
        <div class="content">
            <img src="https://picsum.photos/seed/1/400/600" class="w-100 img-responsive">
        </div>
    [[ endslide ]]
{[ endswiper ]}