I am trying to add slick carousel in react app, so far slick sliding works fine but the responsive part does not work, Please check this code if I am doing something wrong
$('.slick-container1').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 900,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
},
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
});
The same code works totally fine with plain html design but not with react.
Related
I have multiple slick slider on same page. It works fine. I set breakpoint for responsiveness but when I test it from mobile phone the slider initiate few seconds later. Suppose, I set 4 slide initially, and set 2 slides in breakpoint : 768, when I check it from my phone at first it shows 4 slides after few seconds it automatically shows 2 slides.
This is my slider script:
$(document).ready(function(){
$('.autoplay').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2500,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 2
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 2,
arrows: false,
}
}]
});
});
I have 4 sliders, and I use 4 different script tag.
My file structure:
-- jquery js
-- slick js
-- slick scripts
Can anyone please tell me why this problem occur?
My setting:
const settings= {
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
nextArrow: <NextArrow />,
prevArrow: <PrevArrow />,
dotsClass: "slick-dots mb-9"
};
You can use initialSlide:1 in your settings object
you can check more here on API's doc by React Slick
https://react-slick.neostack.com/docs/api#initialSlide
Beginner question! As the question say How to solve this Prop spreading is forbidden Eslint warning.
Reading the Eslint doc on this warning do I really have to do like this:
const {dots, arrows, autoplay...........} = props;
For all props or is there an easier way?
render() {
const { afterChanged } = this.props;
const { beforeChanged } = this.props;
const settings = {
dots: false,
arrows: false,
autoplay: false,
infinite: true,
lazyLoad: false,
swipeToSlide: true,
centerMode: false,
focusOnSelect: false,
className: 'center',
slidesToShow: 4,
afterChange: afterChanged,
beforeChange: beforeChanged,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: false,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
};
return (
<div>
<Slider ref={slider => (this.slider = slider)} {...settings}>
{this.sliders()}
</Slider>
</div>
);
}
Eslint just enforces a style you can define yourself. In this case you have to make the decision, whether you want to allow prop spreading in your codebase or not.
-> If you allow it, you should just disable the react/jsx-props-no-spreading rule in your eslint config.
-> If you don't allow it, you have to explicitly destructure every property. This is the whole point of that eslint rule. It is made to force you to explicitly name these props, to avoid passing unwanted props down the component tree.
When we try to give more than 12 images in a react-slick slider, the images will appear and immediately disappears. How do I resolve this consistency issue using react-slick. I have used the below link to do this.
https://github.com/akiran/react-slick
this.settings = {
dots: false,
infinite: false,
speed: 500,
slidesToShow: 5,
slidesToScroll: 4,
initialSlide: 0,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
}
<Grid item xs={11}>
<div className="padding-container">
<Slider {...this.settings}>
{this.props.children}
</Slider>
</div>
</Grid>
I'm using React-Slick slider component for React JS, but I'm getting a warning that each array has to have an unique key.
I have an array inside of settings for the slider component. Settings are :
const settings = {
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 4000,
responsive: [
{breakpoint: 310, settings: {slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 4000}},
{breakpoint: 468, settings: {slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 4000}},
{breakpoint: 750, settings: {slidesToShow: 2, slidesToScroll: 1, autoplay: true, autoplaySpeed: 4000}},
{breakpoint: 800, settings: {slidesToShow: 2, slidesToScroll: 1, autoplay: true, autoplaySpeed: 4000}},
{breakpoint: 1200, settings: {slidesToShow: 3, slidesToScroll: 2, autoplay: true, autoplaySpeed: 4000}},
{breakpoint: 1800, settings: {slidesToShow: 4, slidesToScroll: 2, autoplay: true, autoplaySpeed: 4000}},
{breakpoint: 2600, settings: {slidesToShow: 5, slidesToScroll: 2, autoplay: true, autoplaySpeed: 4000}},
{breakpoint: 100000, settings: 'unslick'}
]
};
And the slider component where I use those settings is :
<Slider {...settings}>
{this.cars()}
</Slider>
How can I map through those settings to give them an key?
I think this is what you might need:
...
render(){
var Cars = settings.responsive.map.function(car, index){
return(<div key={index}>YOUR CONTENT</div>);
}
return(
<Slider {...settings}>
{Cars}
</Slider>
)
}
I want to add that the second parameter of the map function can be used as a unique index which suits the reacts requested key attribute perfectly
Dirty solution:
...
render(){
var counter = 0;
var Cars = settings.responsive.map.function(car, index){
counter++;
return(<div key={counter}>YOUR CONTENT</div>);
}
return(
<Slider {...settings}>
{Cars}
</Slider>
)
}
For diff-algorithm to work correctly while comparing Virtual DOM, react needs all the list items to have unique keys so that it can identify and differentiate every component uniquely. The solution to this is to pass the index of the list as key as explained by #noa-dev above:
render(){
var Cars = this.cars().map(car, index){
return(<div key={index}>{car}</div>);
}
<Slider {...settings}>
{Cars}
</Slider>
}