CODEWITHSUNDEEP
javascriptcssreactjsslider
user11000630
user11000630

Reputation:

Responsive property does not work on react-slick

I want to change sliderToShow property on small devices but the responsive property does not work.

let settings_3 = {
  dots: false,
  autoplay: false,
  autoplaySpeed: 3000,
  slidesToShow: 3,

  responsive: [{
    breakpoint: 600,
    settings_3: {
      slidesToShow: 2,
      slidesToScroll: 2,
      initialSlide: 2
    }
  }]
};

Upvotes: 0

Views: 18184

Answers (4)

Nizam Shan
Nizam Shan

Reputation: 1

export const Premier = () => {
    const settings = {
        infinite : true,
        slidesToShow : 5,
        slidesToScroll : 2,
        InitalSlide : 0,

        responsive : [{
            breakpoint : 600,
            settings :{
                slidesToShow: 2,
                slidesToScroll:1,
                autoplay : true,
                infinite :true,
            }
        }],
        responsive : [{
            breakpoint : 1000,
            settings :{
                slidesToShow: 3,
                slidesToScroll:2,
                autoplay : true,
                infinite :true,
            }
        }]
    };
}

Upvotes: 0

Abhishek Satyam
Abhishek Satyam

Reputation: 41

Use bottom line approach. Start from the smallest one.

responsive: [
{
  breakpoint: 900,
  settings: {
    slidesToShow: 2,
  },
},
{
  breakpoint: 1150,
  settings: {
    slidesToShow: 3,
  },
},
{
  breakpoint: 1300,
  settings: {
    slidesToShow: 4,
  },
},

],

Upvotes: 2

Rupert Smith
Rupert Smith

Reputation: 1

Just in case there is anyone out there who runs into the same problem as me: if you have a function based component, try changing this to a class based component instead. After trying this the responsive property worked perfectly for me 👍

Upvotes: 0

Ionut Necula
Ionut Necula

Reputation: 11480

Change settings_3 to settings inside the responsive[]. There is no settings_3 property in slick:

class SimpleSlider extends React.Component {
  render() {
    let settings_3 = {
      dots: false,
      autoplay: false,
      autoplaySpeed: 3000,
      slidesToShow: 3,

      responsive: [{
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          initialSlide: 2
        }
      }]
    };
    return (
      <Slider {...settings_3}>
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>
        <div>
          <h3>5</h3>
        </div>
        <div>
          <h3>6</h3>
        </div>
      </Slider>
    );
  }
}

ReactDOM.render( <SimpleSlider/> ,
  document.getElementById('root')
);
#root{
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-slick/0.13.1/react-slick.js"></script>

<div id='root'></div>

Upvotes: 5

Related Questions