Responsive Slider

Responsive Slider

The FlexSlider-based responsive slider (.fslider) is Canvas's lightweight image and content slider. It fits any container width, supports thumbnails, fade or slide transitions, and integrates with the lightbox for gallery viewing.

Structure

• .fslider: the outer wrapper that carries the data attributes.
• .flexslider: the FlexSlider mount point.
• .slider-wrap: holds the slides.
• .slide: one slide each.

<div class="fslider" data-animation="slide" data-arrows="true">
    <div class="flexslider">
        <div class="slider-wrap">
            <div class="slide"><a href="#"><img src="images/slider/1.jpg" alt="Slide 1"></a></div>
            <div class="slide"><a href="#"><img src="images/slider/2.jpg" alt="Slide 2"></a></div>
            <div class="slide"><a href="#"><img src="images/slider/3.jpg" alt="Slide 3"></a></div>
        </div>
    </div>
</div>

Key Attributes

• data-animation: slide (default) or fade.
• data-easing: easing function. Default: swing.
• data-direction: horizontal (default) or vertical.
• data-reverse: true to reverse direction. Default: false.
• data-slideshow: false to disable autoplay. Default: on.
• data-pause: autoplay interval in ms. Default: 5000.
• data-speed: transition speed in ms. Default: 600.
• data-pagi / data-hover: false to disable pagination dots / pause-on-hover.
• data-arrows: false to hide the prev/next arrows. Default: on.
• data-arrow-left / data-arrow-right: arrow icon classes. Defaults: uil uil-angle-left-b / uil uil-angle-right-b.
• data-thumbs: true to use thumbnail navigation (each slide needs a data-thumb).
• data-smooth-height: false to disable smooth height when slides differ. Default: on.
• data-touch: false to disable touch swiping. Default: on.
• data-video: true for video slide handling.

Fade Slider

<div class="fslider" data-animation="fade" data-arrows="false">
    <div class="flexslider">
        <div class="slider-wrap">
            <div class="slide"><img src="images/slider/1.jpg" alt="Slide 1"></div>
            <div class="slide"><img src="images/slider/2.jpg" alt="Slide 2"></div>
        </div>
    </div>
</div>

Thumbnail Navigation

Set data-thumbs="true" and give each slide a data-thumb pointing at the thumbnail image:

<div class="fslider" data-arrows="false" data-thumbs="true" data-animation="fade">
    <div class="flexslider">
        <div class="slider-wrap">
            <div class="slide" data-thumb="images/portfolio/single/slider-thumbs/1.jpg">
                <a href="#"><img src="images/portfolio/single/1.jpg" alt="Slide 1"></a>
            </div>
            <div class="slide" data-thumb="images/portfolio/single/slider-thumbs/7.jpg">
                <a href="#"><img src="images/portfolio/single/7.jpg" alt="Slide 2"></a>
            </div>
        </div>
    </div>
</div>

Note: when data-thumbs="true", pagination becomes the thumbnail strip automatically.

Gallery Slider With Lightbox

Slides can open in the lightbox gallery. Use background-image slides with gallery links:

<div class="fslider" data-arrows="false" data-lightbox="gallery">
    <div class="flexslider">
        <div class="slider-wrap">
            <div class="slide">
                <a href="images/items/lightbox/4-1.jpg" data-lightbox="gallery-item"
                   style="background: url('images/items/4-1.jpg') no-repeat center bottom;
                          background-size: cover; height: 200px;"></a>
            </div>
        </div>
    </div>
</div>

Tips

• When data-direction="vertical", smooth height is turned off automatically.
• The prev/next arrow markup is generated for you; customise only the icon via data-arrow-left / data-arrow-right.
• For full-viewport hero sliders with parallax and YouTube backgrounds, use the Swiper-based canvas slider instead of .fslider.