Slider

Ready Added in 2.0.0

Create a responsive carousel slider.

The Slider component is fully responsive and supports touch and swipe navigation as well as mouse drag for desktops. 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-slider attribute to a container element and create a list of slides with the .gls-slider-items class. Add an image or any other content to each item.

To define the widths of the slider items, use the Width component. Either apply the .gls-child-width-* classes to define the width of all slider items or apply individual widths for each list item using the .gls-width-* classes. If no specific width is set, each item’s width depends on the dimensions of the content itself.

<div gls-slider>
    <ul class="gls-slider-items gls-child-width-1-3@s gls-child-width-1-4@">
        <li>
            <img src="" width="" height="" alt="">
        </li>
    </ul>
</div>

    • 1

    • 2

    • 3

    • 4

    • 5

    • 6

    • 7

    • 8

    • 9

    • 10

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

    <ul class="gls-slider-items gls-child-width-1-2 gls-child-width-1-3@s gls-child-width-1-4@m">
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider1.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>1</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider2.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>2</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider3.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>3</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider4.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>4</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider5.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>5</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider1.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>6</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider2.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>7</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider3.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>8</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider4.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>9</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider5.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>10</h1></div>
        </li>
    </ul>

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

</div>

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

Container

The .gls-slider-container class is responsible for the clipping of the slider items. By default, the gls-slider attribute applies this class to the same element. Alternatively, you can add this class manually to any element within the slider. That way, you can control which container clips the slider items.

<div gls-slider>

    <div class="gls-slider-container">
        <ul class="gls-slider-items gls-child-width-1-4">
            <li>
                <img src="" width="" height="" alt="">
            </li>
        </ul>
    </div>

</div>

Since the slider effect needs a clipping container, box shadows of content items are also clipped. To widen the container to prevent box-shadows from clipping, add the .gls-slider-container-offset class.

Gap

To apply a gap to the slider items, use the Grid component and add the .gls-grid class to the slider. The elements will then be spaced according to the grid gap. You can use the modifiers like .gls-grid-small to change the gap.

<div gls-slider>
    <ul class="gls-slider-items gls-child-width-1-2@s gls-child-width-1-3@m gls-grid">
        <li>
            <img src="" width="" height="" alt="">
        </li>
    </ul>
</div>

    • 1

    • 2

    • 3

    • 4

    • 5

    • 6

    • 7

    • 8

    • 9

    • 10

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

    <ul class="gls-slider-items gls-child-width-1-2 gls-child-width-1-3@m gls-grid">
        <li>
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider1.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>1</h1></div>
            </div>
        </li>
        <li>
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider2.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>2</h1></div>
            </div>
        </li>
        <li>
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider3.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>3</h1></div>
            </div>
        </li>
        <li>
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider4.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>4</h1></div>
            </div>
        </li>
        <li>
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider5.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>5</h1></div>
            </div>
        </li>
        <li>
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider1.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>6</h1></div>
            </div>
        </li>
        <li>
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider2.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>7</h1></div>
            </div>
        </li>
        <li>
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider3.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>8</h1></div>
            </div>
        </li>
        <li>
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider4.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>9</h1></div>
            </div>
        </li>
        <li>
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider5.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>10</h1></div>
            </div>
        </li>
    </ul>

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

</div>

Center

By default, items of the slider always are aligned to the left. To center the list items, just add center: true to the attribute.

<div gls-slider="center: true">...</div>

    • 1

    • 2

    • 3

    • 4

    • 5

  • <div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slider="center: true">

    <ul class="gls-slider-items gls-grid">
        <li class="gls-width-3-4">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>1</h1></div>
            </div>
        </li>
        <li class="gls-width-3-4">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>2</h1></div>
            </div>
        </li>
        <li class="gls-width-3-4">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>3</h1></div>
            </div>
        </li>
        <li class="gls-width-3-4">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo2.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>4</h1></div>
            </div>
        </li>
        <li class="gls-width-3-4">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo3.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>5</h1></div>
            </div>
        </li>
    </ul>

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

</div>

Note In this example, we add the .gls-width-3-4 class to each item, which makes the slider look very similar to a slideshow.

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 slider, use pause-on-hover: true.

<div gls-slider="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-slider="finite: true">...</div>

Slide Sets

To loop through a set of slides instead of single items, just add sets: true to the attribute.

<div gls-slider="sets: true">...</div>

    • 1

    • 2

    • 3

    • 4

    • 5

    • 6

    • 7

    • 8

    • 9

    • 10

  • <div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slider="sets: true">

    <ul class="gls-slider-items gls-child-width-1-2 gls-child-width-1-3@m">
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider1.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>1</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider2.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>2</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider3.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>3</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider4.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>4</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider5.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>5</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider1.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>6</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider2.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>7</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider3.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>8</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider4.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>9</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider5.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>10</h1></div>
        </li>
    </ul>

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

</div>

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

<div gls-slider>

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

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

    <ul>
        <li gls-slider-item="0"><a href="#">...</a></li>
        <li gls-slider-item="1"><a href="#">...</a></li>
        <li gls-slider-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-slider-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-slider>

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

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

</div>

    • 1

    • 2

    • 3

    • 4

    • 5

    • 6

    • 7

    • 8

    • 9

    • 10

    • <div gls-slider>

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

        <ul class="gls-slider-items gls-child-width-1-2 gls-child-width-1-3@s gls-child-width-1-4@m">
            <li>
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider1.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>1</h1></div>
            </li>
            <li>
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider2.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>2</h1></div>
            </li>
            <li>
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider3.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>3</h1></div>
            </li>
            <li>
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider4.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>4</h1></div>
            </li>
            <li>
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider5.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>5</h1></div>
            </li>
            <li>
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider1.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>6</h1></div>
            </li>
            <li>
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider2.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>7</h1></div>
            </li>
            <li>
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider3.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>8</h1></div>
            </li>
            <li>
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider4.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>9</h1></div>
            </li>
            <li>
                <img src="https://utahhealthcare.github.io/gloss-docs/images/slider5.jpg" width="400" height="600" alt="">
                <div class="gls-position-center gls-panel"><h1>10</h1></div>
            </li>
        </ul>

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

    </div>

    <ul class="gls-slider-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.

    To place a navigation outside of a slider, add the .gls-position-center-left-out and the .gls-position-center-right-out class from the Position component to the previous and next navigation. Make sure the .gls-slider-container class, which is responsible for the clipping of the slider items, doesn’t clip the navigation, too.

    <div gls-slider>

    <div class="gls-position-relative">

        <div class="gls-slider-container">
            <ul class="gls-slider-items">...</ul>
        </div>

        <a class="gls-position-center-left-out" href="#" gls-slider-item="previous">...</a>
        <a class="gls-position-center-right-out" href="#" gls-slider-item="next">...</a>

    </div>

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

</div>

      • 1

      • 2

      • 3

      • 4

      • 5

      • 6

      • 7

      • 8

      • 9

      • 10

      • <div gls-slider>

    <div class="gls-position-relative">

        <div class="gls-slider-container gls-light">
            <ul class="gls-slider-items gls-child-width-1-2 gls-child-width-1-3@s gls-child-width-1-4@m">
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/slider1.jpg" width="400" height="600" alt="">
                    <div class="gls-position-center gls-panel"><h1>1</h1></div>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/slider2.jpg" width="400" height="600" alt="">
                    <div class="gls-position-center gls-panel"><h1>2</h1></div>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/slider3.jpg" width="400" height="600" alt="">
                    <div class="gls-position-center gls-panel"><h1>3</h1></div>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/slider4.jpg" width="400" height="600" alt="">
                    <div class="gls-position-center gls-panel"><h1>4</h1></div>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/slider5.jpg" width="400" height="600" alt="">
                    <div class="gls-position-center gls-panel"><h1>5</h1></div>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/slider1.jpg" width="400" height="600" alt="">
                    <div class="gls-position-center gls-panel"><h1>6</h1></div>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/slider2.jpg" width="400" height="600" alt="">
                    <div class="gls-position-center gls-panel"><h1>7</h1></div>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/slider3.jpg" width="400" height="600" alt="">
                    <div class="gls-position-center gls-panel"><h1>8</h1></div>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/slider4.jpg" width="400" height="600" alt="">
                    <div class="gls-position-center gls-panel"><h1>9</h1></div>
                </li>
                <li>
                    <img src="https://utahhealthcare.github.io/gloss-docs/images/slider5.jpg" width="400" height="600" alt="">
                    <div class="gls-position-center gls-panel"><h1>10</h1></div>
                </li>
            </ul>
        </div>

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

        <div class="gls-visible@s">
            <a class="gls-position-center-left-out gls-position-small" href="#" gls-slidenav-previous gls-slider-item="previous"></a>
            <a class="gls-position-center-right-out gls-position-small" href="#" gls-slidenav-next gls-slider-item="next"></a>
        </div>

    </div>

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

</div>

      Viewport height

      Adding the gls-height-viewport attribute from the Height component to the list of slider items will stretch the height of the <ul> and <li> elements to fill the whole viewport height. Since the width and height now aren’t defined by the item’s content anymore, you have to use absolute positioning for the content.

      Use the Cover component so that images cover the whole item area and are clipped. The .gls-grid-match class from the Grid component matches the height of the direct child of each item. This is useful in this example, since the child element now applies the same width and height as the list item.

      <div gls-slider>
    <ul class="gls-slider-items gls-child-width-1-3@m gls-grid-match" gls-height-viewport="min-height: 300">
        <li>
            <div class="gls-cover-container">
                <img src="" alt="" gls-cover>
            </div>
        </li>
    </ul>
</div>

        • 1

        • 2

        • 3

        • 4

        • 5

      • <div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slider="center: true">

    <ul class="gls-slider-items gls-grid gls-grid-match" gls-height-viewport="offset-top: true; offset-bottom: 30">
        <li class="gls-width-3-4">
            <div class="gls-cover-container">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="" gls-cover>
                <div class="gls-position-center gls-panel"><h1>1</h1></div>
            </div>
        </li>
        <li class="gls-width-3-4">
            <div class="gls-cover-container">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" alt="" gls-cover>
                <div class="gls-position-center gls-panel"><h1>2</h1></div>
            </div>
        </li>
        <li class="gls-width-3-4">
            <div class="gls-cover-container">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="" gls-cover>
                <div class="gls-position-center gls-panel"><h1>3</h1></div>
            </div>
        </li>
        <li class="gls-width-3-4">
            <div class="gls-cover-container">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo2.jpg" alt="" gls-cover>
                <div class="gls-position-center gls-panel"><h1>4</h1></div>
            </div>
        </li>
        <li class="gls-width-3-4">
            <div class="gls-cover-container">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo3.jpg" alt="" gls-cover>
                <div class="gls-position-center gls-panel"><h1>5</h1></div>
            </div>
        </li>
    </ul>

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

</div>

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

      Content

      The slider is not restricted to images. Any content can be used like text, videos, images with text overlays or ken burns effect. Here is an example using the Card component.

        • Headline

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

        • Headline

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

        • Headline

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

        • Headline

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

        • Headline

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

        • <div class="gls-slider-container-offset" gls-slider>

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

        <ul class="gls-slider-items gls-child-width-1-2@s gls-grid">
            <li>
                <div class="gls-card gls-card-default">
                    <div class="gls-card-media-top">
                        <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
                    </div>
                    <div class="gls-card-body">
                        <h3 class="gls-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="gls-card gls-card-default">
                    <div class="gls-card-media-top">
                        <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="">
                    </div>
                    <div class="gls-card-body">
                        <h3 class="gls-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="gls-card gls-card-default">
                    <div class="gls-card-media-top">
                        <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="1800" height="1200" alt="">
                    </div>
                    <div class="gls-card-body">
                        <h3 class="gls-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="gls-card gls-card-default">
                    <div class="gls-card-media-top">
                        <img src="https://utahhealthcare.github.io/gloss-docs/images/photo2.jpg" width="1800" height="1200" alt="">
                    </div>
                    <div class="gls-card-body">
                        <h3 class="gls-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="gls-card gls-card-default">
                    <div class="gls-card-media-top">
                        <img src="https://utahhealthcare.github.io/gloss-docs/images/photo3.jpg" width="1800" height="1200" alt="">
                    </div>
                    <div class="gls-card-body">
                        <h3 class="gls-card-title">Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                    </div>
                </div>
            </li>
        </ul>

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

    </div>

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

</div>

        Note Since the slider effect needs a clipping container, box shadows of content items are also clipped. To widen the container to prevent box-shadows from clipping, add the .gls-slider-container-offset class. Alternatively, use the gls-slider="center: true" mode if your content items have a box shadow.

        Content overlays

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

        <div gls-slider>
    <ul class="gls-slider-items">
        <li>
            <img src="" width="" height="" alt="">
            <div class="gls-position-center">

                <!-- 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.

          • 1

          • 2

          • 3

          • 4

          • 5

          • 6

          • 7

          • 8

          • 9

          • 10

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

    <ul class="gls-slider-items gls-child-width-1-2 gls-child-width-1-3@s gls-child-width-1-4@m">
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider1.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>1</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider2.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>2</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider3.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>3</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider4.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>4</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider5.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>5</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider1.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>6</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider2.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>7</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider3.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>8</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider4.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>9</h1></div>
        </li>
        <li>
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider5.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1>10</h1></div>
        </li>
    </ul>

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

</div>

        Content parallax

        Add the gls-slider-parallax attribute to any element inside the slides to animate it together with the slider 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 slider animation. Take a look at the possible properties that can be animated.

        <div gls-slider>
    <ul class="gls-slider-items">
        <li>
            <img src="" width="" height="" alt="">
            <div class="gls-position-center">

                <div gls-slider-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-slider-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-slider-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.

          • 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-slider>

    <ul class="gls-slider-items gls-grid">
        <li class="gls-width-4-5">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
                <div class="gls-position-center gls-text-center">
                    <h2 gls-slider-parallax="x: 100,-100">Heading</h2>
                    <p gls-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li class="gls-width-4-5">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="">
                <div class="gls-position-center gls-text-center">
                    <h2 gls-slider-parallax="x: 100,-100">Heading</h2>
                    <p gls-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li class="gls-width-4-5">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="1800" height="1200" alt="">
                <div class="gls-position-center gls-text-center">
                    <h2 gls-slider-parallax="x: 100,-100">Heading</h2>
                    <p gls-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li class="gls-width-4-5">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo2.jpg" width="1800" height="1200" alt="">
                <div class="gls-position-center gls-text-center">
                    <h2 gls-slider-parallax="x: 100,-100">Heading</h2>
                    <p gls-slider-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </li>
        <li class="gls-width-4-5">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo3.jpg" width="1800" height="1200" alt="">
                <div class="gls-position-center gls-text-center">
                    <h2 gls-slider-parallax="x: 100,-100">Heading</h2>
                    <p gls-slider-parallax="x: 200,-200">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-slider-item="previous"></a>
    <a class="gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slider-item="next"></a>

</div>

        Content transitions

        Add clsActivated: gls-transition-active to the attribute to trigger transition classes from the Transition component automatically inside slides. Contrary to the parallax effect, transitions are not attached to the slider animation and start playing independently after the slider animation.

        <div gls-slider="clsActivated: gls-transition-active">
    <ul class="gls-slider-items">
        <li>
            <img src="" width="" height="" alt="">
            <div class="gls-position-bottom">

                <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 slider.

          • Bottom

            Lorem ipsum dolor sit amet, consectetur adipiscing elit.

          • Bottom

            Lorem ipsum dolor sit amet, consectetur adipiscing elit.

          • Bottom

            Lorem ipsum dolor sit amet, consectetur adipiscing elit.

          • Bottom

            Lorem ipsum dolor sit amet, consectetur adipiscing elit.

          • Bottom

            Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        • <div class="gls-position-relative gls-visible-toggle gls-light" tabindex="-1" gls-slider="clsActivated: gls-transition-active; center: true">

    <ul class="gls-slider-items gls-grid">
        <li class="gls-width-3-4">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
                <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>
            </div>
        </li>
        <li class="gls-width-3-4">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="">
                <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>
            </div>
        </li>
        <li class="gls-width-3-4">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="1800" height="1200" alt="">
                <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>
            </div>
        </li>
        <li class="gls-width-3-4">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo2.jpg" width="1800" height="1200" alt="">
                <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>
            </div>
        </li>
        <li class="gls-width-3-4">
            <div class="gls-panel">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo3.jpg" width="1800" height="1200" alt="">
                <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>
            </div>
        </li>
    </ul>

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

</div>

        Toggle on hover

        To toggle transitions on hover, use the .gls-transition-toggle class from the Transition component and tabindex="0". This will trigger the transition when the element is hovered or focused.

        <div gls-slider>
    <ul class="gls-slider-items">
        <li class="gls-transition-toggle" tabindex="0">
            <img src="" width="" height="" alt="">
            <div class="gls-position-bottom">

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

                    <!-- The content goes here -->

                </div>

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

          • 1

          • 2

          • 3

          • 4

          • 5

          • 6

          • 7

          • 8

          • 9

          • 10

          • <div gls-slider>

    <ul class="gls-slider-items gls-child-width-1-2 gls-child-width-1-3@s gls-child-width-1-4@m gls-light">
        <li class="gls-transition-toggle" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider1.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1 class="gls-transition-slide-bottom-small">1</h1></div>
        </li>
        <li class="gls-transition-toggle" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider2.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1 class="gls-transition-slide-bottom-small">2</h1></div>
        </li>
        <li class="gls-transition-toggle" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider3.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1 class="gls-transition-slide-bottom-small">3</h1></div>
        </li>
        <li class="gls-transition-toggle" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider4.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1 class="gls-transition-slide-bottom-small">4</h1></div>
        </li>
        <li class="gls-transition-toggle" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider5.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1 class="gls-transition-slide-bottom-small">5</h1></div>
        </li>
        <li class="gls-transition-toggle" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider1.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1 class="gls-transition-slide-bottom-small">6</h1></div>
        </li>
        <li class="gls-transition-toggle" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider2.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1 class="gls-transition-slide-bottom-small">7</h1></div>
        </li>
        <li class="gls-transition-toggle" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider3.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1 class="gls-transition-slide-bottom-small">8</h1></div>
        </li>
        <li class="gls-transition-toggle" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider4.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1 class="gls-transition-slide-bottom-small">9</h1></div>
        </li>
        <li class="gls-transition-toggle" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/slider5.jpg" width="400" height="600" alt="">
            <div class="gls-position-center gls-panel"><h1 class="gls-transition-slide-bottom-small">10</h1></div>
        </li>
    </ul>

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

</div>

          Component options

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

          Slider

          Option Value Default Description
          autoplay Boolean false Slider autoplays.
          autoplay-interval Number 7000 The delay between switching slides in autoplay mode.
          center Boolean false Center the active slide.
          draggable Boolean true Enable pointer dragging.
          easing String ease The animation easing (CSS timing functions or cubic-bezier).
          finite Boolean false Disable infinite sliding.
          index Number 0 Slider item to show. 0 based index.
          pause-on-hover Boolean true Pause autoplay mode on hover.
          sets Boolean false Slide in sets.
          velocity Number 1 The animation velocity (pixel/ms).

          JavaScript

          Learn more about JavaScript components.

          Initialization

          Gloss.slider(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.slider(element).show(index);

          Shows the slider item.

          startAutoplay

          Gloss.slider(element).startAutoplay();

          Starts the slider autoplay.

          stopAutoplay

          Gloss.slider(element).stopAutoplay();

          Stops the slider autoplay.