We Keep Coding

Slick Slider - Multiple Sliders with variations in Slider Length

Hello my dear community,
I'm working on a site with multiple sliders on one site. I use slick.js
Problem ist that the slidesToShow is depending on the number of slider items.
Maximum slidesToShow should be 6
if the number of slides is smaller then 6:
-> slidesToShow should be the number of slider items
I tried this:
$('.carousel').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: $(this).querySelectorAll( '.item:not(.slick-cloned)' ).length > 4 ? 6 : 2,
slidesToScroll: 1,
});
Got console error that querySelectorAll is not a function. Also $(this) is the document not the slider in that context.
Also I tried to iterate through the sliders and tried to initializing them one by one but it also does not work
var imgcarousels = document.getElementsByClassName('vaunet-carousel ');
Array.prototype.forEach.call(imgcarousels, function(carousel, index) {
console.log(carousel);
carousel.slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 991,
settings: {
dots: true,
arrows: false,
slidesToShow: 1
}
}
]
});
});
Error: carousel.slick is not a function
Any Idea how to make the slidesToShow depending on the slides?
Thanks a ton <3
Regards
Timo

Is it posible to hide some elements in slick slider pagination?

Let's suppose slick slider pagination has 25 pages (it might be possible on mobile devices)
Is it possible to set up a slick slider to show pagination like shown below?
Pagination block: < 1 ... 2 3 4 ... 25 >
Update: what I mean is to hide some pages and show these dots instead

try this
<section class="slider">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
</section>
<span class="pagingInfo"></span>
$(".slider").slick({
autoplay: true,
dots: true,
customPaging: function (slider, i) {
var thumb = $(slider.$slides[i]).data();
return `<a>${i}</a>`;
},
responsive: [
{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2,
},
},
],
});

SlickJs problem with vertical slider when loading two slider with same class

I am trying to use one slider code for two sliders using same class name. I have created this codepen to illustrate the problem.
Problems:
Both sliders are not behaving same, means they have different sliding pattern. I have changed the color current active slide to show how both sliders are different.
One of the slider works fine ( till some slides) but other one totally off as you can see, in terms of container height, highlight pattern, etc.
Both of them have chopped content on top or bottom, even though there is no centerMode enabled. The behaviour I was expecting is to current slide to slide on the top and not show the preview of gone slide (top) and next (bottom)
Second slider changes its height randomly. I don't know why
I have tried one solution which didn't work either and it is there as commented code in the codepen.
$(".feature-container").each(function () {
console.log(this.id);
let elm_primary = $("#" + this.id)
.find(".feature-slider")
.get(0);
$(elm_primary).slick({
slidesToShow: 5,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 1000,
vertical: true,
arrows: false,
infinite: true,
responsive: [
{
breakpoint: 700,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 1000,
vertical: true,
dots: false,
arrows: true
}
}
]
});
});

Slick.js : Scroll through carousel items without selecting slides

I am using slick carousel in one of my projects & have added the configuration to display the next and prev button.
I am trying to tweak the default behavior of the next and prev button in such a way that clicking them just scrolls from left to right but the currently selected slide will remain the same. I am not able to tweak this default behavior and clicking the next and prev button is changing the selected slide as well. Has anyone tried the same?
$('.product-slider').slick({
dots: true,
infinite: false,
speed: 700,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: false,
dots: true
}
}, {
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: false,
dots: true
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
dots: true
}
}
]
});

Detecting screen size with jQuery and change property

I am using a Slick slider/carousal and displaying six items currently. Now what I want to do is I want the script to detect if the browser has been resized or viewed from a smaller screen (say below 768px) then the number of items displayed should change to 3. This is a perfect replica of the media query function in CSS which detects the screen size for making the website responsive. Just the same thing I want to be performed in my jQuery function but I have never done so. Here is my script:
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).on('ready', function() {
jQuery(".center").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 6,
slidesToScroll: 6
});
});
</script>

The plugin has already way to update the options on different view ports. Please have a look at this. Hope this will help you.
$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});