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 :-)
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
});
I have a carousel with variable widths, I would like for it to have a behavior of scrolling all displayed blocks and also for the user to swipe to any spot, but no matter how I try, they seem to contradict each other.
Here's my configuration:
$('.carousel').slick({
infinite: false,
variableWidth: true,
slidesToShow: 1,
slidesToScroll: 7,
swipe: true,
swipeToSlide: true,
});
Is there any workaround for this problem?
I have a codepen with the example below:
https://codepen.io/vicpantoja/pen/NWxqKzO
The issue is using the swipeToSlide option. Setting swipeToSlide: true overrides slidesToScroll. From the website, "Allow users to drag or swipe directly to a slide irrespective of slidesToScroll" (http://kenwheeler.github.io/slick/).
If you want 7 slides to show at one time and a swipe (or 'next' button click) to show the next set of 7, you can do it by setting these three options and removing swipeToSlide:
slidesToShow: 7
slidesToScroll: 7
swipe: true
In your case:
$('.carousel').slick({
infinite: false,
variableWidth: true,
slidesToShow: 7,
slidesToScroll: 7,
swipe: true
});
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 slick slider with sync option in my theme. I added js&css files in my functions.php. I created row in VC, then 2 columns. In first column I have 3 paragraphs. On second column I have 3 images. I want to scroll paragraphs and the change images. This is how it looks now
in my custom js I added something like this
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
In result I got something like this
What's wrong wrong with my code? Where I should add classes for slick slider? Thank you for any help!
I have been given a task to change how our slider works. We use the jQuery plugin called Slick Slider to display news blurbs.
What they want me to do is to have the previous/next buttons and autoplay to all move the slider one slide at a time in all modes (mobile, tablet, and desktop). Ok not a problem, I set that up easily enough. Then they asked me to change it so that it displays one dot for every 3 slides and clicking those dots moves the slider 3 slides at a time.
Obviously this is going to require me making modifications to the functions in slick.js. I don't see any built in functionality to do this. I am trying to figure out how to extend this library and override the functions one at a time. To be honest I am not sure how to do this properly with jQuery plugins.
This is complicated by the fact that we are running this in Drupal. I have setup a JS Fiddle with a close approximation of what we are doing right now.
JS Fiddle: https://jsfiddle.net/9z52tfkw/
My slick initiation code is here:
(function($) {
$('.my-slider').slick({
speed: 1000,
autoplay: true,
dots: true,
mobileFirst: true,
slidesToShow: 1,
slidesToScroll: 1,
focusOnSelect: true,
appendArrows: $('.controls'),
prevArrow: '<button type="button" class="prev">Prev</button>',
nextArrow: '<button type="button" class="next">Next</button>',
responsive: [
{
breakpoint: 960,
settings: {
dots: true,
slidesToShow: 3
}
},
{
breakpoint: 769,
settings: {
dots: true,
slidesToShow: 2
}
}
]
});
}(jQuery));
Slick Slider details and code can be found here: http://kenwheeler.github.io/slick
I am using version 1.5.6. A copy of the same version of slick.js can be found here: https://github.com/kenwheeler/slick/blob/1.5.6/slick/slick.js
To clarify, I am not asking that anyone do the overrides for me. Instead I am asking for help in overriding the plugin's functions or otherwise extending the plugin. I am capable from there, though will be grateful for any help provided.
I think this will also help me in the future with other jQuery plugins. Thanks!
You can always just remove 2 out of three of the dots :)
i.e. add this to the end of the init:
.find('.slick-dots li').filter(function(i,e){
return (i % 3 != 0);
}).hide();
JSFiddle: https://jsfiddle.net/TrueBlueAussie/9z52tfkw/2/
For a more obvious example: jsfiddle.net/9z52tfkw/3