I have multiple Slick carousels and the appendDots parameter is adding too many navigation dots to each carousel.
e.g. if I have 3 Slick carousels, 3 sets of dots are appearing on each carousel, instead of one set for each.
$('.carousel').each(function() {
$(this).slick({
infinite: true,
speed: 300,
slidesToShow: 1,
dots: true,
appendDots:'dots-container'
});
})
Any idea how to limit the appendDots parameter to just this carousel?
Presumeably your 'dots-container' selector is a class you have multiple times on the page so it's adding the dots to each instance of that class once for each carousel.
Instead of using the same global selector for each carousel make it relative to each instance of the carousel
$('.carousel').each(function() {
$(this).slick({
infinite: true,
speed: 300,
slidesToShow: 1,
dots: true,
appendDots:$(this).siblings('dots-container')
});
})
I don't know where the container is relative to the carousel, this snippet assumes it's a sibling
Related
I'm using slick slider for a slider on a WP page template I built for a client, and I'm running into a problem where the slider sometimes initializes okay, and sometimes it doesn't initialize at all. I can't find a solution to why is it happening.
When it doesn't initialize it just shows the slider content as full width images. Screenshots included.
This is how it looks when it's ok:
This is how it looks when it doesn't:
This is the slick slider code:
// Initialize slick slider
$('.sample-class').slick({
slidesToShow: 8,
slidesToScroll: 1,
dots: false,
arrows: true,
infinite: true,
autoplay : true,
autoplaySpeed: 3000
});
in a website that i developed , i using the "Slick Slider" and i want to count the numbers of the thumbnails, in the Jquery / js file i write the thumbnails will show as 5 , with centerMode:true,
i want (with your help, of course) to write a function that count the number of the thumbnails -
When the number is 5 OR LESS than the option of centerMode will be false (so if this 5 thumbnails or 2 thumbnails when this is on false the thumbnails will be centered bottom the big picture),
When this 5 thumbnails an ABOVE this working fine.
Thank you For Advanced...
This is the code what i have (but when the thumbnails is 5 or less they are not centered)
/** Project Slider **/
$('.single-project-slider-wrraper').slick({
rtl: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.single-project-nav-wrraper'
});
$('.single-project-nav-wrraper').slick({
rtl: true,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.single-project-slider-wrraper',
dots: false,
centerMode: true,
infinite: true,
arrows: true,
focusOnSelect: true
});
OK, if no one answer to me so i give the answer - the solution was that i need to switch between the js files of slick slider. i loaded the minified js ( it turns out that somthing wrong there..i don't know what ) and i needed to load the full/normal js file - slick.js , when i loaded the slick.js file the slider behave as i want (as i ask in the post above exactly ).
maybe it is strange but this is the solution :-)
slick.js carousel won't initialize in second tab. When I open the second tab the main video does not show until I click the dots.
I tried using $(videoSlider).slick('setPosition'); and also added .each function which does work but not if sliders are in the tabs. If I have numerous carousels on a page they function prooperly. It is only when put in tabs it does not work.
// initialize slick sliders
$(videoSlider).each(function() {
$(this).slick({
arrows: false,
dots: true,
infinite: true,
speed: 500, slidesToShow: 1,
slidesToScroll: 1
});
});
Carousel will work in tabs as it does when out of tabs
An issue that stands out is in your selector for videoSlider. This needs to be a string value and should most likely be '.videoSlider' to match a class used in your markup.
You may also run into an issue if you initialize a slideshow while it's hidden in a tab. In this case, Slick has trouble determining the slide width and assigns a width of '0px' to each slide. You can overcome this issue by refreshing your slideshow when you reveal your tab's contents. For instance, if your slideshow has id="slideshow1":
$("#slideshow1").slick("refresh");
More information about the hidden slideshow issue: https://github.com/kenwheeler/slick/issues/235
I have given some margin top to my slick-center class.I want the slick slider to scroll 3 slides at once.These are my slider settings :
$(".center").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 3
});
$(".center").slick('slickSetOption', 'slidesToScroll', 3, true);
});
As slidesToScroll does not work with centerMode ,I'm using slickSetOption to force it to work with scrolling three slides at once.
The issue: This slick-center styling works perfectly fine when the number of slides in my slider are in multiples of 3.But whenever the number of slides are 4,5 .. or any non three multiple,the slick slider doesn't append the correct slide with the slick-center class.
This is my codepen :- https://codepen.io/shivanit2/pen/zLwzbR
Currently there are 8 slides in my codepen,and you can see how its not giving the correct styling .(if you scroll on the third slick-dot)
If you increase 1 slide,it will work perfectly.(multiple of 3's)
How can I resolve this issue?
I want to use center mode in slick slider but need to avoid partial prev/next slides. (Just show the three main divs only)
My settings is like this,
$('.framefitFacelist').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
infinite: false,
centerMode: true
});
Thanks.
Hi you can change this with javascript. You have to set the opacity of the partial slides to 0;
Essentially you can create a variable and set prev and next slide opacity to 0 when concatenating css and then call the beforeChange slick event.
I found this fiddle that seems to achieve what you are looking for.
test it out
https://jsfiddle.net/yassarikhan786/uwgjx6nv/