Slideshow

Ready Added in 2.0.0

Create a responsive slideshow with images and videos.

The Slideshow component is fully responsive and supports touch and swipe navigation as well as mouse drag for desktops. When swiping between slides, the animation literally sticks at your fingertips or mouse cursor. It even accelerates to keep up with your pace when you click through previous and next navigation. All animations are hardware accelerated for a smoother performance.

Usage

To apply this component, add the gls-slideshow attribute to a container element and create a list of slides with the .gls-slideshow-items class.

Add an image in the background of each slide using the gls-cover attribute from the Cover component.

<div gls-slideshow>
    <ul class="gls-slideshow-items">
        <li>
            <img src="" alt="" gls-cover>
        </li>
    </ul>
</div>

<div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slideshow>

    <ul class="gls-slideshow-items">
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
        </li>
    </ul>

    <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
    <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

</div>

Note To lazy load images in the slides, use the loading="lazy" attribute. The Slideshow will automatically remove the attribute from images in adjacent slides.

Animations

By default, the slideshow uses a slide animation. You can set the animation option to use a different animation. Possible values are as follows:

Animation	Description
`slide`	Slides slide in side by side.
`fade`	Slides fade in.
`scale`	Slides are scaled up and fade out.
`pull`	Slides are pulled from the deck.
`push`	Slides are pushed to the deck.

<div gls-slideshow="animation: fade">...</div>

Slide
Fade
Scale
Pull
Push

<div class="gls-child-width-1-2@m" gls-grid>
    <div>

        <div class="gls-h3">Slide</div>

        <div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slideshow>

            <ul class="gls-slideshow-items">
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
                </li>
            </ul>

            <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
            <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

        </div>

    </div>
    <div>

        <div class="gls-h3">Fade</div>

        <div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slideshow="animation: fade">

            <ul class="gls-slideshow-items">
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
                </li>
            </ul>

            <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
            <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

        </div>

    </div>
    <div>

        <div class="gls-h3">Scale</div>

        <div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slideshow="animation: scale">

            <ul class="gls-slideshow-items">
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
                </li>
            </ul>

            <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
            <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

        </div>

    </div>
    <div>

        <div class="gls-h3">Pull</div>

        <div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slideshow="animation: pull">

            <ul class="gls-slideshow-items">
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
                </li>
            </ul>

            <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
            <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

        </div>

    </div>
    <div>

        <div class="gls-h3">Push</div>

        <div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slideshow="animation: push">

            <ul class="gls-slideshow-items">
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
                </li>
            </ul>

            <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
            <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

        </div>

    </div>
</div>

Autoplay

To activate autoplay, just add the autoplay: true option to the attribute. You can also set the interval in milliseconds between switching slides using autoplay-interval: 6000. To pause autoplay when hovering the slideshow, use pause-on-hover: true.

<div gls-slideshow="autoplay: true">...</div>

Infinite Scrolling

By default, infinite scrolling is enabled. To disable this behavior, just add the finite: true option to the attribute.

<div gls-slideshow="finite: true">...</div>

Ratio

The slideshow always takes up the full width of its parent container. The height adapts according to the defined ratio. To change the default ratio of 16:9, just add the ratio option to the attribute. It’s recommended to use the same ratio as the background images. For example, just use their width and height, like 1600:1200.

<div gls-slideshow="ratio: 7:3">...</div>

<div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slideshow="ratio: 7:3; animation: push">

    <ul class="gls-slideshow-items">
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
        </li>
    </ul>

    <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
    <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

</div>

Min/Max height

By default, the slideshow height adopts to the defined ratio. A minimum or maximum height can be set using the min-height and max-height options.

<div gls-slideshow="min-height: 300; max-height: 600">...</div>

<div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slideshow="min-height: 300; max-height: 600; animation: push">

    <ul class="gls-slideshow-items">
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
        </li>
    </ul>

    <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
    <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

</div>

Viewport height

Adding the gls-height-viewport attribute from the Height component to the list of slideshow items will stretch the height to fill the whole viewport. You can set the min-height option to define a minimum height.

<div gls-slideshow="ratio: false">
    <ul class="gls-slideshow-items" gls-height-viewport="min-height: 300">...</ul>
</div>

<div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slideshow="ratio: false">

    <ul class="gls-slideshow-items" gls-height-viewport="offset-top: true; offset-bottom: 30">
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
        </li>
    </ul>

    <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
    <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

</div>

Note This example is set to 70% of the viewport height.

To navigate through your slides, just use the gls-slideshow-item attribute. To target the slides, set the attribute of every nav item to the index number of the respective slideshow item. The elements with the gls-slideshow-item attribute need to be inside the gls-slideshow container. Setting the attribute to next and previous will switch to the adjacent slides.

<div gls-slideshow>

    <ul class="gls-slideshow-items">...</ul>

    <a href="#" gls-slideshow-item="previous">...</a>
    <a href="#" gls-slideshow-item="next">...</a>

    <ul>
        <li gls-slideshow-item="0"><a href="#">...</a></li>
        <li gls-slideshow-item="1"><a href="#">...</a></li>
        <li gls-slideshow-item="2"><a href="#">...</a></li>
    </ul>

</div>

The flexibility of the Slideshow component allows you to use any of the other Gloss components to navigate through items. For example the Slidenav, Dotnav and Thumbnav components can be used to style the slideshow navigations.

If there is no item specific content in the navigation items, you can also add the .gls-slideshow-nav class instead of adding navigation items manually. It will generate its items automatically using <li><a href="#"></a></li> as markup. This is a useful shortcut when using the Dotnav.

<div gls-slideshow>

    <ul class="gls-slideshow-items">...</ul>

    <ul class="gls-slideshow-nav gls-dotnav"></ul>

</div>

<div gls-slideshow="animation: push">

    <div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1">

        <ul class="gls-slideshow-items">
            <li>
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
            </li>
            <li>
                <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
            </li>
            <li>
                <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
            </li>
        </ul>

        <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
        <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

    </div>

    <ul class="gls-slideshow-nav gls-dotnav gls-flex-center gls-margin"></ul>

</div>

Note For better visibility of overlaying navigations, add the .gls-light or .gls-dark class from the Inverse component.

Videos

The slideshow is not restricted to images. Other media, like videos, can be positioned in the background of each slide using the gls-cover attribute from the Cover component. Videos are muted, and play automatically. The video will pause whenever it’s not visible, and resume once it becomes visible again.

<div gls-slideshow>
    <ul class="gls-slideshow-items">
        <li>
            <video src="" autoplay loop muted playsinline gls-cover></video>
        </li>
        <li>
            <iframe src="" gls-cover></iframe>
        </li>
    </ul>
</div>

<div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slideshow="animation: push">

    <ul class="gls-slideshow-items">
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
        </li>
        <li>
            <video autoplay loop muted playsinline gls-cover>
                <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
                <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
                <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
            </video>
        </li>
        <li>
            <iframe src="https://www.youtube-nocookie.com/embed/YE7VzlLtp-4?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="560" height="315" allowfullscreen gls-cover></iframe>
        </li>
    </ul>

    <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
    <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

</div>

Ken Burns effect

To add a simple Ken Burns effect, wrap the image with a div and add the .gls-position-cover and .gls-animation-kenburns classes. You can also apply the .gls-animation-reverse or one of the .gls-transform-origin-* classes from the Utility component to modify the effect.

<div gls-slideshow>
    <ul class="gls-slideshow-items">
        <li>
            <div class="gls-position-cover gls-animation-kenburns gls-animation-reverse gls-transform-origin-center-left">
                <img src="" alt="" gls-cover>
            </div>
        </li>
    </ul>
</div>

<div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slideshow="animation: push">

    <ul class="gls-slideshow-items">
        <li>
            <div class="gls-position-cover gls-animation-kenburns gls-animation-reverse gls-transform-origin-center-left">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
            </div>
        </li>
        <li>
            <div class="gls-position-cover gls-animation-kenburns gls-animation-reverse gls-transform-origin-top-right">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
            </div>
        </li>
        <li>
            <div class="gls-position-cover gls-animation-kenburns gls-animation-reverse gls-transform-origin-bottom-left">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
            </div>
        </li>
    </ul>

    <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
    <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

</div>

Content overlays

Add content overlays using the Position component. It allows you to place the content anywhere inside the slide.

<div gls-slideshow>
    <ul class="gls-slideshow-items">
        <li>
            <img src="" alt="" gls-cover>
            <div class="gls-position-center gls-position-small">

                <!-- The content goes here -->

            </div>
        </li>
    </ul>
</div>

Note To adapt your content for better visibility on each image, add the .gls-light or .gls-dark class from the Inverse component or use the Overlay to add any style to the overlay box.

- Center
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Bottom
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Overlay Bottom
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Overlay Bottom Right
  
  Lorem ipsum dolor sit amet.

<div class="gls-position-relative gls-visible-toggle" tabindex="-1" gls-slideshow="animation: push">

    <ul class="gls-slideshow-items">
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
            <div class="gls-position-center gls-position-small gls-text-center gls-light">
                <h2 class="gls-margin-remove">Center</h2>
                <p class="gls-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
            <div class="gls-position-bottom gls-position-medium gls-text-center gls-light">
                <h3 class="gls-margin-remove">Bottom</h3>
                <p class="gls-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
            <div class="gls-overlay gls-overlay-primary gls-position-bottom gls-text-center">
                <h3 class="gls-margin-remove">Overlay Bottom</h3>
                <p class="gls-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
            <div class="gls-overlay gls-overlay-default gls-position-bottom-right gls-position-small">
                <h3 class="gls-margin-remove">Overlay Bottom Right</h3>
                <p class="gls-margin-remove">Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
    </ul>

    <div class="gls-light">
        <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
        <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>
    </div>

</div>

Content parallax

Add the gls-slideshow-parallax attribute to any element inside the slides to animate it together with the slideshow animation. Add an option with the desired animation values for each CSS property you want to animate. Define at least one start and end value. It can be done by passing two values separated by a comma.

This functionality is inherited from the Parallax component, and it allows animating CSS properties depending on the scroll position of the slideshow animation. Take a look at the possible properties that can be animated.

<div gls-slideshow>
    <ul class="gls-slideshow-items">
        <li>
            <img src="" alt="" gls-cover>
            <div class="gls-position-center gls-position-small">

                <div gls-slideshow-parallax="x: 100,-100">

                    <!-- The content goes here -->

                </div>

            </div>
        </li>
    </ul>
</div>

In the example above, the content will start at 100 and animate half way to 0 while the slide moves in. When the slide starts again to move out, the content will continue to animate to -100. This works because the start and end values have the same distance. For different distances, three values are needed: Start (Slide animates in), Middle (Slide is centered), End (Slide animates out).

<div gls-slideshow-parallax="x: 300,0,-100">...</div>

The next example defines different in and out animations. The content slides in by moving from 100 to 0 and fades out from 1 to 0.

<div gls-slideshow-parallax="x: 100,0,0; opacity: 1,1,0">...</div>

- Heading
  
  Lorem ipsum dolor sit amet.
- Heading
  
  Lorem ipsum dolor sit amet.
- Heading
  
  Lorem ipsum dolor sit amet.

<div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slideshow="animation: push">

    <ul class="gls-slideshow-items">
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
            <div class="gls-position-center gls-position-small gls-text-center">
                <h2 gls-slideshow-parallax="x: 100,-100">Heading</h2>
                <p gls-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
            <div class="gls-position-center gls-position-small gls-text-center">
                <h2 gls-slideshow-parallax="x: 100,-100">Heading</h2>
                <p gls-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
            <div class="gls-position-center gls-position-small gls-text-center">
                <h2 gls-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2>
                <p gls-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
    </ul>

    <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
    <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

</div>

Advanced effects

The parallax attribute can be used to add additional effects to the slideshow animations. In the following example the push animation is extended by dimming out and scaling down the image when it’s sliding out.

<div gls-slideshow="animation: push">
    <ul class="gls-slideshow-items">
        <li>
            <div class="gls-position-cover" gls-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="" alt="" gls-cover>
            </div>
            <div class="gls-position-cover" gls-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
        </li>
    </ul>
</div>

- Heading
  
  Lorem ipsum dolor sit amet.
- Heading
  
  Lorem ipsum dolor sit amet.
- Heading
  
  Lorem ipsum dolor sit amet.

<div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slideshow="animation: push">

    <ul class="gls-slideshow-items">
        <li>
            <div class="gls-position-cover" gls-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
            </div>
            <div class="gls-position-cover" gls-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
            <div class="gls-position-center gls-position-medium gls-text-center">
                <div gls-slideshow-parallax="scale: 1,1,0.8">
                    <h2 gls-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p gls-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li>
            <div class="gls-position-cover" gls-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
            </div>
            <div class="gls-position-cover" gls-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
            <div class="gls-position-center gls-position-medium gls-text-center">
                <div gls-slideshow-parallax="scale: 1,1,0.8">
                    <h2 gls-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p gls-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li>
            <div class="gls-position-cover" gls-slideshow-parallax="scale: 1.2,1.2,1">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
            </div>
            <div class="gls-position-cover" gls-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
            <div class="gls-position-center gls-position-medium gls-text-center">
                <div gls-slideshow-parallax="scale: 1,1,0.8">
                    <h2 gls-slideshow-parallax="x: 200,0,0">Heading</h2>
                    <p gls-slideshow-parallax="x: 400,0,0;">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
    </ul>

    <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
    <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

</div>

Content transitions

Transition classes from the Transition component are triggered automatically inside slides. Contrary to the parallax effect, transitions are not attached to the slideshow animation and start playing independently after the slideshow animation.

<div gls-slideshow>
    <ul class="gls-slideshow-items">
        <li>
            <img src="" alt="" gls-cover>
            <div class="gls-position-bottom gls-position-small">

                <div class="gls-transition-slide-bottom">

                    <!-- The content goes here -->

                </div>

            </div>
        </li>
    </ul>
</div>

Together with the Overlay component, content transitions are used to build a classic caption for the slideshow.

- Bottom
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Bottom
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Left
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slideshow="animation: fade">

    <ul class="gls-slideshow-items">
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
            <div class="gls-overlay gls-overlay-primary gls-position-bottom gls-text-center gls-transition-slide-bottom">
                <h3 class="gls-margin-remove">Bottom</h3>
                <p class="gls-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
            <div class="gls-overlay gls-overlay-primary gls-position-bottom gls-text-center gls-transition-slide-bottom">
                <h3 class="gls-margin-remove">Bottom</h3>
                <p class="gls-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
            <div class="gls-overlay gls-overlay-primary gls-position-right gls-text-center gls-transition-slide-right gls-width-medium">
                <h3 class="gls-margin-remove">Left</h3>
                <p class="gls-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
    </ul>

    <a class="gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
    <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

</div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Slideshow

Option	Value	Default	Description
`animation`	String	`slide`	Slideshow animation mode: `slide`, `fade`, `scale`, `pull` or `push`.
`autoplay`	Boolean	`false`	Slideshow autoplays.
`autoplay-interval`	Number	`7000`	The delay between switching slides in autoplay mode.
`draggable`	Boolean	`true`	Enable pointer dragging.
`easing`	String	`ease`	The animation easing (CSS timing functions or cubic-bezier).
`finite`	Boolean	`false`	Disable infinite sliding.
`pause-on-hover`	Boolean	`true`	Pause autoplay mode on hover.
`index`	Number	`0`	Slideshow item to show. 0 based index.
`velocity`	Number	`1`	The animation velocity (pixel/ms).
`ratio`	Boolean, String	`16:9`	The ratio. (`false` prevents height adjustment)
`min-height`	Boolean, Number	`false`	The minimum height.
`max-height`	Boolean, Number	`false`	The maximum height.

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.slideshow(element, options);

Events

The following events will be triggered on elements with this component attached:

Name	Description
`beforeitemshow`	Fires before an item is shown.
`itemshow`	Fires after an item is shown.
`itemshown`	Fires after an item’s show animation has completed.
`beforeitemhide`	Fires before an item is hidden.
`itemhide`	Fires after an item’s hide animation has started.
`itemhidden`	Fires after an item’s hide animation has completed.

Methods

The following methods are available for the component:

Show

Gloss.slideshow(element).show(index);

Shows the slideshow item.

startAutoplay

Gloss.slideshow(element).startAutoplay();

Starts the slideshow autoplay.

stopAutoplay

Gloss.slideshow(element).stopAutoplay();

Stops the slideshow autoplay.