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>
Related
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.
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.
I'm using react-slick. I want to show four items at a time. I'm showing data dynamically.
If I have single item in carousel, it's repeating to fill the place of four items.
This is my code:
const settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
};
<Slider {...settings}>
//mapping data
</Slider>
Thank you
It repeats to fill all the 4 places since infinite is provided as true. So it try to find four items, but ends up finding the same item again and again. To get your desired behaviour(that is it scrolls infinitely in both directions), i suggest you set the slidesToShow dynamically.
Assuming you have your mapping data in list, you can set the number of slidesToShow dynamically.
const settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: list.length > 4 ? 4 : list.length,
slidesToScroll: 1,
};
<Slider {...settings}>
//mapping data
</Slider>
infinte : items.length >3;
let settings = {
slidesToShow: 3,
arrows: false,
infinite: megaProjects.length > 3,
slidesToScroll: 3,
autoplay: true,
autoplaySpeed: 8000,
lazyLoad: true,
}
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>
}