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
});
Related
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 :-)
I am using Shopify (Debut theme), which comes with a version of the Slick carousel pre-installed.
Slick does work - however the responsive setting/feature does not. If I use the exact code that slick give as one of their demos for a simple example:
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
None of the responsive features work. It only takes the initial slidesToShow value of 2. If you remove that then it defaults back to the slick default of 1. No window resizing/refreshing makes any difference, and my div container is the full width of my DOM/viewport so it is not being affected by a being in a small container, if that is relevant.
I have seen this issue being asked a lot on different forums with no real solution that I can find. I have attempted to update my version of Slick with no luck - but this could still be the issue and I may have not done so correctly.
Can anyone advise? Thanks in advance.
I fixed it myself by doing the following:
Commented out slick.min.js in the vendor.js file
Downloaded latest slick (v1.8.1) https://kenwheeler.github.io/slick/
Created a new file in Assets called "slick.js" and copied the slick.min.js file into it which i'd just downloaded
Added the following below my vendor.js (but above theme.js) scripts in my theme.liquid
<script src="{{ 'slick.js' | asset_url }}" defer="defer"></script>
The responsive feature then worked.
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/
I'm using the Slick slider in my website and when I try to use the slickGoTo function, I see an issue. slickGoTo works perfectly, but after I use it, my next/prev buttons and also the drag for changing slides does not work at all.
What must I do to fix this issue?
$(document).ready(function(){
$('.calendar_slide .rail ul').slick({
dots: false,
infinite: false,
draggable: true,
speed: 300,
slidesToShow: 10,
slidesToScroll: 1,
nextArrow: '.arrow_prev',
prevArrow: '.arrow_next',
rtl: true
});
$('.calendar_slide .rail ul').slick('slickGoTo', 38);
});
When I set the infinite option to true, the issue is fixed. However, I don't want to use the infinite mode.
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