We are using slick slider for a clients project and it has been working perfectly so far, however I have noticed something, I don't know whether it is a bug or something that I am missing something.
When the slick slider is loaded, just before you get the whole slider visible in the viewport it doesnt load properly and stacks at bottom of each other with half of the slider of the page. Then whole slider is visible in the viewport it jumps back to how it should, almost like it has re-slicked its self.
Below is the code for my Slick Slider
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
and Images looks like as in link here
I have read on various places and found this linkGithub link for same issue
But it is not working for me. I am still getting same ugly effect.
Please suggest
Have you tried delaying the function until the dom is loaded?
$( window ).load(function() {
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
});
or, if that doesn't work:
setTimeout(function(){
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
}, 2000)
Related
I have a slick carousel, within the first slide I am autoplaying a video. This is working when the slick starts, shows the 2nd slide then gets back to the 1st. But I cannot get this to work on pageload, I think this is because I am using afterChange. You can see my example here
The JavaScript for firing is:
$('.top-carousel').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 4000,
dots: true,
pauseOnHover: false,
infinite: true,
arrows: false,
});
$('.top-carousel').on('afterChange', function(event, slick, currentSlide){
if ($("#slick-slide00").hasClass("slick-active")) {
$('.top-carousel').slick('slickPause');
theVideo.play();
}
});
document.getElementById('theVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
$('.top-carousel').slick('slickPlay');
}
Does anyone have any ideas please?
When I set rtf fasle then the page goes white and when I set slidesToScroll- 1 it also trhoughs same result.
$('.demo').slick({
dots: false,
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
cssEase: 'linear',
accessibility:true,
autoplay:true,
autoplaySpeed: 3000,
});
Add the rtl option when you initialize slick and set it to true. You'll also need to set the attribute "dir" to "rtl" for the HTML tag or the parent of the slider.
$('.demo').slick({
dots: false,
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
cssEase: 'linear',
accessibility:true,
autoplay:true,
autoplaySpeed: 3000,
rtl: true
});
The default for the slideshow is left to right. To enable right to left, you need to set rtl: true and then according to the Slick website:
The HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".
For example:
<div dir="rtl">
<div class="demo">
...
</div>
</div>
I am using Slick as an add on for my end user from other teams to use. I want to make it as simple as possible for them to use by just changing the outside wrap as (carousel-wrap-1, carousel-wrap-2 ….etc) if they need more than one on the page.
Questions:
1. Is that possible to make the JS function like this?? (Attached is my js code look like, Plus my fix for the equal height for all the slide.)
OR
2. I still can ask them to copy and paste everytime they want to add a new set of carousel, but inside the "prevArrow and nextArrow", how to make it call only that parent? (thinking something $(this) + $(".prev")) ??
$(document).ready(function(){
$("[class*='carousel-wrap-'] .carousel").slick({
prevArrow: $(".prev"),
nextArrow: $(".next"),
accessibility: true,
autoplay: true,
autoplaySpeed: 7000,
dots: true,
infinite: true,
speed: 600,
fade: true,
cssEase: 'linear',
pauseOnHover: true,
pauseOnFocus: true,
});
});
$(document).ready(function() {
var offsetHeight = $('.slick-list').outerHeight();
$("[class*='carousel-wrap-'] .carousel .band").outerHeight(offsetHeight);
});
$( window ).resize(function() {
$("[class*='carousel-wrap-'] .carousel .band").css("height", "100%")
var offsetHeight = $('.slick-list').outerHeight();
$("[class*='carousel-wrap-'] .carousel .band").outerHeight(offsetHeight);
});
<div class="carousel-wrap-1">
<div class="carousel-control">
<div class="prev"></div><div class="next"></div>
</div>
<div class="carousel">
<div class="band slide1"></div>
<div class="band slide2"></div>
<div class="band slide3"></div>
</div>
</div>
I found a solution for this, but not sure how to combine
$("[class*='carousel-wrap-'] .carousel").each(function() {
$(this).slick({
appendArrows: $(this).siblings('.carousel-control'),
accessibility: true,
autoplay: true,
autoplaySpeed: 7000,
dots: true,
infinite: true,
speed: 600,
fade: true,
cssEase: 'linear',
pauseOnHover: true,
pauseOnFocus: true,
});
});
the equal height together.
It is possible to use one function for multiple classes. you just pass in all class names you want to use that function. like this:
$('.celebrities, .sellers').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 6,
slidesToScroll: 1
}
It worked for me. my classes are
celebrities
and
sellers
I have an issue with vertical slick slider in responsive. I am not able to see last slider completely, it showing half slider on some devices, like iphone5,6,7.. etc.
jQuery('.slick-carousel').slick({
vertical: true,
verticalSwiping: true,
slidesToShow: 2,
slidesToScroll: 1,
infinite: false,
customDots: false,
centerMode: false,
dots: false,
centerPadding: '0px',
responsive: [{
breakpoint: 481,
settings: {
customDots: true
}
}]
});
I want to show complete slider on scroll in responsive.
is it possible to make delay of slider start... I don't want to slider start immediatly, want it to wait 2 sec before start and then slide.
$(function() {
$('.banner').slick({
autoplay:true,
autoplaySpeed:2000,
centerMode: true,
centerPadding: '50px',
slidesToShow: 1,
speed:2000,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
});
If you want this at initial page load then simply use a setTimeout() function like this,
var count = 0;
setTimeout(()=>{
count = 1;
$('.banner').slick({
autoplay:true,
autoplaySpeed:2000,
centerMode: true,
centerPadding: '50px',
slidesToShow: 1,
speed:2000,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
},2000) // Initialize the amount of time to delay , Its 2seconds currently.
if(count == 1){
$(function() {
$('.banner').slick({
autoplay:true,
autoplaySpeed:2000,
centerMode: true,
centerPadding: '50px',
slidesToShow: 1,
speed:2000,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
});
}
I think this is a bit of a cleaner solution than above. Making use of the inbuilt play/pause methods in Slick. Taken from here.
var slider = $('.slider');
slider.slick({
autoplay: true,
autoplaySpeed: 1000
}).slick("slickPause");
var initialDelay = 3000;
setTimeout(function() {
slider.slick("slickPlay");
},initialDelay);
just control your speed through speed:2000, or autoplaySpeed:2000, this will delay your slider according to the given time