Menu icon Foundation
Foundation and Slick slider - display single slide for small

Hi,
We are using slick slider with foundation, is there a way we can get the slider to display a single slide in small (slidesToShow=1 for small)?

here is our code:

<div class="row text-center slick-multislider">
        <div class="large-4 small-12 columns">
          <img src="img/1.jpg" alt="">
          <h5 class="h5-title-margin-top">Image Title 1</h5>
          <div class="title-blue-line-content"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, voluptatibus eaque ratione quam natus ad!</p>
        </div>
        <div class="large-4 small-12 columns">
          <img src="img/2.jpg" alt="">
          <h5 class="h5-title-margin-top">Image Title 1</h5>
          <div class="title-blue-line-content"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, voluptatibus eaque ratione quam natus ad!</p>
        </div>
        <div class="large-4 small-12 columns">
          <img src="img/3.jpg" alt="">
          <h5 class="h5-title-margin-top">Image Title 1</h5>
          <div class="title-blue-line-content"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, voluptatibus eaque ratione quam natus ad!</p>
        </div>
        <div class="large-4 columns">
          <img src="img/4.jpg" alt="">
          <h5 class="h5-title-margin-top">Image Title 1</h5>
          <div class="title-blue-line-content"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, voluptatibus eaque ratione quam natus ad!</p>
        </div>
        <div class="large-4 columns">
          <img src="img/5.jpg" alt="">
          <h5 class="h5-title-margin-top">Image Title 1</h5>
          <div class="title-blue-line-content"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, voluptatibus eaque ratione quam natus ad!</p>
        </div>
        <div class="large-4 columns">
          <img src="img/6.jpg" alt="">
          <h5 class="h5-title-margin-top">Image Title 1</h5>
          <div class="title-blue-line-content"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, voluptatibus eaque ratione quam natus ad!</p>
        </div>
      </div>
            

         

 $('.slick-multislider').slick({
          slidesToShow: 3,
          slidesToScroll: 2,
          autoplay: true,
          autoplaySpeed: 2000,
          dots: true,
        });
            

         

Slick Slider

Hi,
We are using slick slider with foundation, is there a way we can get the slider to display a single slide in small (slidesToShow=1 for small)?

here is our code:

<div class="row text-center slick-multislider">
        <div class="large-4 small-12 columns">
          <img src="img/1.jpg" alt="">
          <h5 class="h5-title-margin-top">Image Title 1</h5>
          <div class="title-blue-line-content"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, voluptatibus eaque ratione quam natus ad!</p>
        </div>
        <div class="large-4 small-12 columns">
          <img src="img/2.jpg" alt="">
          <h5 class="h5-title-margin-top">Image Title 1</h5>
          <div class="title-blue-line-content"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, voluptatibus eaque ratione quam natus ad!</p>
        </div>
        <div class="large-4 small-12 columns">
          <img src="img/3.jpg" alt="">
          <h5 class="h5-title-margin-top">Image Title 1</h5>
          <div class="title-blue-line-content"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, voluptatibus eaque ratione quam natus ad!</p>
        </div>
        <div class="large-4 columns">
          <img src="img/4.jpg" alt="">
          <h5 class="h5-title-margin-top">Image Title 1</h5>
          <div class="title-blue-line-content"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, voluptatibus eaque ratione quam natus ad!</p>
        </div>
        <div class="large-4 columns">
          <img src="img/5.jpg" alt="">
          <h5 class="h5-title-margin-top">Image Title 1</h5>
          <div class="title-blue-line-content"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, voluptatibus eaque ratione quam natus ad!</p>
        </div>
        <div class="large-4 columns">
          <img src="img/6.jpg" alt="">
          <h5 class="h5-title-margin-top">Image Title 1</h5>
          <div class="title-blue-line-content"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, voluptatibus eaque ratione quam natus ad!</p>
        </div>
      </div>
            

         

 $('.slick-multislider').slick({
          slidesToShow: 3,
          slidesToScroll: 2,
          autoplay: true,
          autoplaySpeed: 2000,
          dots: true,
        });
            

         
Asif about 5 years ago

You need to write some javascript and load the appropriate block as per the window width:

// SLick Slider Code
 var $windowWidth=$(window).width();

$( window ).resize(function() {
var $windowWidth=$(window).width();
if(($windowWidth > 1) && ($windowWidth < 640)){
$('.slick-multislider').unslick();  
      $('.slick-multislider').slick({
          slidesToShow: 1,
          slidesToScroll: 1,
          autoplay: true,
          autoplaySpeed: 2000,
          dots: true,
        });

    } else {
$('.slick-multislider').unslick();       
        $('.slick-multislider').slick({
          slidesToShow: 3,
          slidesToScroll: 2,
          autoplay: true,
          autoplaySpeed: 2000,
          dots: true,
        });
    }  

});  

if(($windowWidth > 1) && ($windowWidth < 640)){

      $('.slick-multislider').slick({
          slidesToShow: 1,
          slidesToScroll: 1,
          autoplay: true,
          autoplaySpeed: 2000,
          dots: true,
        });

    } else {
        $('.slick-multislider').slick({
          slidesToShow: 3,
          slidesToScroll: 2,
          autoplay: true,
          autoplaySpeed: 2000,
          dots: true,
        });
    }

here is a codepen. let me know if this works.

http://codepen.io/asif999/pen/ceLuv

-Asif

Yousuff about 5 years ago

Thanks For Your Prompt Rly. It Works