Sliders

Show multiple frames of content in sequence. Useful for slideshows and image carousels. Powered by fireSlider.

Standard Slider


<div class="slider js-slider slider--no-carousel js-slider--no-carousel">

    <div class="slider__contents js-slider__contents">
    
        <ul>
            
            <li class="slide slide--1">
                <div class="slide__image">
                    <img src="path/to/img.jpg">
                </div>
                <div class="slide__overlay">
                    <div class="slide-text">
                        <div class="slide-text__title">
                            [Slide title here...]
                        </div>
                        <div class="slide-text__content">
                            [Slide content here...]
                        </div>
                        <div class="slide-text__action">
                            [Slide action text here...]
                        </div>
                    </div>
                </div>
            </li>
            
            [...]
            
            <li class="slide slide--7">
                <div class="slide__image">
                    <img src="path/to/img.jpg">
                </div>
                <a href="http://www.foo.com/" class="slide__overlay">
                    <div class="slide-text">
                        <div class="slide-text__title">
                            [Slide title here...]
                        </div>
                        <div class="slide-text__content">
                            [Slide content here...]
                        </div>
                        <div class="slide-text__action">
                            [Slide action text here...]
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        
    </div>

    <div class="slider__controls">

		<div class="slider-controls-nav">
            <a class="slider-nav slider-nav--prev" href="" aria-label="Go to Previous Slide" title="Go to Previous Slide"></a>
            <a class="slider-nav slider-nav--next" href="" aria-label="Go to Next Slide" title="Go to Next Slide"></a>
		</div>

		<div class="slider-controls-pager"></div>

    </div>

</div>

Carousel

A carousel can have breakpoints that control how many slides are visible and which slide is the "active" slide at different screen sizes.

  • Kids 1
    Halloween
    Button Text Here
  • Kids 2
    Fireplace
  • Kids 3
    Easter
  • Kids 4
    Goofballs
  • Kids 5
    Pajamas
  • Kids 6
    Bikers
  • Kids 7
    Boots 

<div class="slider js-slider slider--carousel js-slider--carousel">

    <div class="slider__contents js-slider__contents">
    
        <ul
            data-fireslider-show="5"
            data-fireslider-active="3"
            data-fireslider-effect="slideInOut">
            
            <li class="slide slide--1">
                <div class="slide__image">
                    <img src="path/to/img.jpg">
                </div>
                <div class="slide__overlay">
                    <div class="slide-text">
                        <div class="slide-text__title">
                            [Slide title here...]
                        </div>
                        <div class="slide-text__content">
                            [Slide content here...]
                        </div>
                        <div class="slide-text__action">
                            [Slide action text here...]
                        </div>
                    </div>
                </div>
            </li>
            
            [...]
            
            <li class="slide slide--7">
                <div class="slide__image">
                    <img src="path/to/img.jpg">
                </div>
                <a href="http://www.foo.com/" class="slide__overlay">
                    <div class="slide-text">
                        <div class="slide-text__title">
                            [Slide title here...]
                        </div>
                        <div class="slide-text__content">
                            [Slide content here...]
                        </div>
                        <div class="slide-text__action">
                            [Slide action text here...]
                        </div>
                    </div>
                </a>
            </li>
        </ul>

    </div>
    
    <div class="slider__controls">

		<div class="slider-controls-nav">
            <a class="slider-nav slider-nav--prev" href="" aria-label="Go to Previous Slide" title="Go to Previous Slide"></a>
            <a class="slider-nav slider-nav--next" href="" aria-label="Go to Next Slide" title="Go to Next Slide"></a>
		</div>

		<div class="slider-controls-pager"></div>

    </div>

</div>

Class Reference

Class Info
slider Primary container. Should be added to a div.
slider--no-bg If applied, slide images are converted to background images for their respective slides.
slider--carousel By default, a slider displays as a carousel.
slider--no-carousel Denotes a no-carousel slider. This removes carousel-specific styles and behaviors.
slider__contents Contains the slides and next/previous links. Should be added to a div.
slide A single slide. Should be added to an li.
slide--active The currently active slide.
slide--[number] Each slide has a unique number class for identification purposes.
slide__image Contains the slide's image. Should be added to a div. If the "slider--no-bg" class is present, this container will be hidden.
slide__overlay Contains the slide's overlay. Should be added to a div.
slide-text Contains the slide's text and content. Should be added to a div.
slide-text__title Contains the slide's title. Should be added to a div.
slide-text__content Contains the slide's main text content. Should be added to a div.
slide-text__action Contains the slide's action link/button. Should be added to a div.
slider__controls Contains the slider's controls (e.g., next/previous links, pager). Should be added to an a.
slider-nav General class for next/previous links. Should be added to an a.
slider-nav--prev Previous slide link.
slider-nav--next Next slide link.
slider-controls-pager Main container for slider page. Should be added to an div.
slider-controls-pager__active The pager control representing the currently active slide.