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?
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)'
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.
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
As I know Ionic slider using Swiper JS
I put the loop on true but it not looping
it reach the final slide and stop
here is my config
Config= {
initialSlide: 0,
slidesPerView: 1,
speed: 400,
spaceBetween: 20,
loop: true,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
};
<ion-slides
#slides
[options]="Config"
loop="true"
>
<ion-slide>{{"slide-1"}}</ion-slide>
<ion-slide>{{"slide-2"}}</ion-slide>
</ion-slides>
Put "loop" as true in your html (as above). This worked for me..
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,
}