Slidenav

Ready Added in 2.0.0

Defines a navigation with previous and next buttons to flip through slideshows.

Usage

To create a navigation with previous and next buttons, just add the gls-slidenav attribute to <a> elements. Add the previous or next parameter to the attribute to style the nav items as previous or next buttons.

<a href="" gls-slidenav-next></a>
<a href="" gls-slidenav-previous></a>

<a href="#" gls-slidenav-previous></a>
<a href="#" gls-slidenav-next></a>

Large modifier

To increase the size of the slidenav icons, add the .gls-slidenav-large class.

<a href="" class="gls-slidenav-large" gls-slidenav-next></a>
<a href="" class="gls-slidenav-large" gls-slidenav-previous></a>

<a href="#" class="gls-slidenav-large" gls-slidenav-previous></a>
<a href="#" class="gls-slidenav-large" gls-slidenav-next></a>

Slidenav container

To display a conjoint slidenav, wrap the slidenav items inside a <div> element and add the .gls-slidenav-container class, as well as one of the .gls-position-* classes.

<div class="gls-slidenav-container">
    <a href="" gls-slidenav-previous></a>
    <a href="" gls-slidenav-next></a>
</div>

<div class="gls-slidenav-container">
    <a href="" gls-slidenav-previous></a>
    <a href="" gls-slidenav-next></a>
</div>

Position as overlay

To position the slidenav on top of an element or the Slideshow component for example, just add one of the .gls-position-* classes from the Position component. To create a position context on the container, add the .gls-position-relative class.

Use the .gls-light or .gls-dark class from the Inverse component to apply a light or dark color for better visibility.

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

    <!-- The element which is wrapped goes here -->

    <a class="gls-position-center-left" href="" gls-slidenav-previous></a>
    <a class="gls-position-center-right" href="" gls-slidenav-next></a>

</div>

Note You can also apply the Visibility component, so that the slidenav only appears on hover.

<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-slidenav-large gls-position-center-left gls-position-small gls-hidden-hover" href="#" gls-slidenav-previous gls-slideshow-item="previous"></a>
    <a class="gls-slidenav-large gls-position-center-right gls-position-small gls-hidden-hover" href="#" gls-slidenav-next gls-slideshow-item="next"></a>

</div>