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,
}
Related
my React website from right to left
<html lang="ar" dir="rtl">
and I have react-slide to show 1 image every slide
const settings = {
dots: true,
infinite: true,
autoplaySpeed:1500,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
arrows: false,
initialSlide: 0,
fade: true,
rtl: true
};
my problem is fade effect not show any image !!!!
Assuming there are no problems in the html or css code, try either of the following cssEase options.
cssEase: 'linear',
cssEase: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)'
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?
Note: This is my first time asking a question on here.
I have built a logo slider (with 2 breakpoints) using Slick.js via the build in this video by Tim Strifler (Divi Life) which I used as a base: https://www.youtube.com/watch?v=m8jMTbzyQU4.
The slider works how I want it to except whenever I resize the browser window. Then the slider "goes haywire" (stops, slides backwards, changes speeds, loads images at a stuttered/jumbled rate, etc.).
If I refresh the page at whatever screen size I'm currently on, then it will reset and work fine. (It does not appear to right itself if I just wait.)
Here is the code I am using to style the slider:
(The Divi row it is in is set to 100% width and overflow is hidden.)
jQuery(document).ready(function() {
jQuery('.divilife-3-col-feature-blurb-slider').slick({
dots: false,
arrows: false,
pauseOnHover: false,
changeDir: false,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 0,
speed: 7000,
cssEase: "linear",
infinite: true,
responsive: [
{
breakpoint: 980,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>
I have tried different settings including changing the row width, toggling btwn overflow hidden/visible, taking away the breakpoints, and adding mobileFirst: true.
But I haven't found anything that remedies the problem.
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>
}