Issue
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
}
}]
};
Solution
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>
Answered By - Ionut
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.