We Keep Coding

Slick Slider - slick-current class is not moving when navigating if all slides are shown

I have a simple slider with Slick.js (https://kenwheeler.github.io/slick/)
The slider arrows are hidden by default when all slide-items are shown because its not necessary to slide. So i use custom arrows with a click function that call .slick('slickNext') or .slick('slickPrev') and its working fine. But my issue is when all slide-items are shown and I call the functions to slide next or previous the .slick-current class on the active slide-item is not switching anymore.
My goal is that the .slick-current class still moves when I click the buttons.
An example: https://jsfiddle.net/0nprbj95/2/ Appreciate your help!

One solution to ensure that Slick is moving the .slick-current class is to hold the state of the current slide index and then use the slick('goTo') method to force Slick to move the class to this slide.
This may not give exactly the behavior that you want because Slick will still shift the slides in its "viewport", but you might be able to tweak the behavior from there.
$(document).ready(function(){
var currentSlide = 0;
var numSlides = document.getElementsByClassName('slide-item').length;
$('.slider-items-wrapper').slick({
slidesToShow: 4,
slidesToScroll: 1,
mobileFirst: true,
infinite: true,
arrows: false,
});
$('.button-prev').click(function(){
// wrap to last slide when clicked on first slide
currentSlide = (currentSlide - 1 + numSlides) % numSlides;
$('.slider-items-wrapper').slick('goTo', currentSlide);
});
$('.button-next').click(function(){
// wrap to first slide when clicked on last slide
currentSlide = (currentSlide + 1) % numSlides;
$('.slider-items-wrapper').slick('goTo', currentSlide);
});
});
Full JSFiddle: https://jsfiddle.net/c3amxzk1/1/

Slick carousel adaptive height not working when showing 2 slides

I am building a website with some sliders and using Slick for that. Usually, in regards to the slides when I am showing 1 slide at a time the adaptive height works but when showing 2 slides at the same time it doesn't work. Here is the issue replicated in a JSFiddle.
Here is the JavaScript:
var options = {
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
arrows: false,
dotsClass: 'slick-dots slick-dots-black',
adaptiveHeight: true,
};
$('.slider').slick(options);
I've been googling this issue and it seems other people have similar issues but I couldn't find a solution.
Any ideas appreciated!

Yeah it does seem that slick will only allow adaptiveHeight on single sliding carousels.
In the docs on adaptiveHeight it says this...
Enables adaptive height for single slide horizontal carousels.
It's funny I never expected this behaviour from slick, I assumed adaptive height worked in all cases. But apparently not.
This is a little bit hacky but might cover a solution for your website to enable adaptive height on multi slide sliders. This essentially finds the tallest slides currently on display and adds a height to the .slick-list. Using css transition on this element gives the slick adaptiveHeight effect.
Also we have a .on('resize') event which re-runs the slider height checks incase the slide content is fluid and the slide heights change responsively.
Read my comments in script to see what is going on...
Also see fiddle here... https://jsfiddle.net/joshmoto/1a5vwr3j/
// my slick slider options
var options = {
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
arrows: false,
dotsClass: 'slick-dots slick-dots-black',
adaptiveHeight: true,
};
// my slick slider as constant object
const mySlider = $('.slider').on('init', function(slick) {
// on init run our multi slide adaptive height function
multiSlideAdaptiveHeight(this);
}).on('beforeChange', function(slick, currentSlide, nextSlide) {
// on beforeChange run our multi slide adaptive height function
multiSlideAdaptiveHeight(this);
}).slick(options);
// our multi slide adaptive height function passing slider object
function multiSlideAdaptiveHeight(slider) {
// set our vars
let activeSlides = [];
let tallestSlide = 0;
// very short delay in order for us get the correct active slides
setTimeout(function() {
// loop through each active slide for our current slider
$('.slick-track .slick-active', slider).each(function(item) {
// add current active slide height to our active slides array
activeSlides[item] = $(this).outerHeight();
});
// for each of the active slides heights
activeSlides.forEach(function(item) {
// if current active slide height is greater than tallest slide height
if (item > tallestSlide) {
// override tallest slide height to current active slide height
tallestSlide = item;
}
});
// set the current slider slick list height to current active tallest slide height
$('.slick-list', slider).height(tallestSlide);
}, 10);
}
// when window is resized
$(window).on('resize', function() {
// run our multi slide adaptive height function incase current slider active slides change height responsively
multiSlideAdaptiveHeight(mySlider);
});
body {
background: skyblue;
margin: 0;
padding: 20px;
}
.slick-list {
transition: all .5s ease;
}
.aslide {
background: yellow;
}
<div class="slider">
<div class="aslide">1</div>
<div class="aslide">2<br/>2<br/>2</div>
<div class="aslide">3<br/>3<br/>3<br/>3<br/>3</div>
<div class="aslide">4<br/>4<br/>4</div>
<div class="aslide">5</div>
<div class="aslide">6<br/>6<br/>6</div>
<div class="aslide">7<br/>7<br/>7<br/>7<br/>7</div>
<div class="aslide">8<br/>8</div>
<div class="aslide">9<br/>9<br/>9<br/>9<br/>9<br/>9</div>
<div class="aslide">10<br/>10<br/>10</div>
<div class="aslide">11</div>
<div class="aslide">12<br/>12</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

Force cloning slides in slick

I have a needed that I've not been able to develop.
I'm using slick to show 3 slides, but only the center one shows all the information. I need an infinite slider in order to get all the slides being at the center.
The problem is when the slides are only 3, because it stops. I would need to force the slider clonning the slides as if i had 4 or more slides...
$('.center').slick({
centerMode: true,
centerPadding: '0px',
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
focusOnSelect: true,
adaptiveHeight: true
});
Here I leave you an example with slides enough: https://jsfiddle.net/f580ys4b/1/
And here an example with only 3 slides: https://jsfiddle.net/f580ys4b/2/

Before initiating Slick, check if the number of slide items is larger than slidesToShow. In case it is not, duplicate the children until there are more slide items than slides to show. Can easily be done with jQuery.
var slideCount = jQuery(".slide").length;
if (slideCount <= 3) {
// clone element
jQuery(".center.slider").children().clone(true, true).appendTo(".center.slider");
}
jQuery('.center').slick({
arrows: false,
centerMode: true,
centerPadding: '0px',
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
focusOnSelect: true,
adaptiveHeight: true
});

My solution based on Rohan answer:
In my case I have a slider with filters, when the filtered elements are the same as the elements to be displayed, the infinite dont working. When I reset the slider when filtering I compare the filtered elements with those that should be displayed and if they are equal I duplicate the elements.
$('.slider-productos').on('reInit', function(event, slick, currentSlide, nextSlide) {
// total sliders number - get option slidesToShow number
// ^ ^
if (slick.slideCount === slick.options.slidesToShow) {
// you can clone on slider or all, it depends on how many slider you want to show
//var toClone = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(2)');
var toClone1 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(1)');
var toClone2 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(2)');
var toClone3 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(3)');
toClone1.clone().appendTo(".slider-productos .slick-track");
toClone2.clone().appendTo(".slider-productos .slick-track");
toClone3.clone().appendTo(".slider-productos .slick-track");
// Set any option only for refresh slider refresh true
// ^ ^
$('.slider-productos').slick('slickSetOption', 'infinite', true, true);
}
});

How do I deal with cloned slides to create a seamless html5 video slider in SlickJS?

I'm using slickJS to create a slider with HTML5 video backgrounds for each slide. Here's my SlickJS init code:
$homeSlider.slick({
adaptiveHeight: true,
arrows: false,
autoplay: true,
autoplaySpeed: 4000,
dots: true,
fade: false,
initialSlide: startSlide,
lazyLoad : 'progressive',
onBeforeChange: beforeSlickChange
});
Everything's working fine except that when I reach the end of the list of slides and try to go to the next slide (this loops back to the first slide), Slick shows a cloned slide for a moment and then the real first slide. Because of this, I'm unable to get a seamless transition between the last and first slide going in either direction. When I click forward to the first slide from the last slide or to the last slide from the first slide, the dummy slide appears (with no video playing) and after about 500ms or so, the real slide takes its place with the video playing.
What I'd like to happen is for the video to be playing seamlessly when transitioning two slides. I tried playing the video on the cloned slide and then playing the real slide's video from a slightly later point so that when the cloned slide disappeared, the real slide's video would be at the same point and there would be no noticeable change. However, the amount of time it takes for the cloned slide to disappear seems inconsistent.
Does anyone have a solution for this problem? Changing the slider to fade instead of slide fixes this problem, but I'd like to keep the sliding behavior. Thank you!

I managed to solve this problem. What I did was to play the video on the cloned slide and the real slide and then set the currentTime property of the real slide to that of the cloned slide on the afterChange event. The code looks like this:
Init code:
$homeSlider.slick({
adaptiveHeight: true,
arrows: false,
autoplay: true,
autoplaySpeed: 4000,
dots: true,
fade: false,
initialSlide: startSlide,
lazyLoad : 'progressive',
onBeforeChange: beforeSlickChange,
onAfterChange: afterSlickChange
});
onBeforeChange handler:
function beforeSlickChange(slick, currentSlide, nextSlide) {
if(hasVideoBG(currentSlide) === true && isMobile(mobileQuery) === false) {
getSlideVideoByIndex(currentSlide).currentTime = 0;
getSlideVideoByIndex(nextSlide).currentTime = 0;
}
if(hasVideoBG(nextSlide) === true && isMobile(mobileQuery)=== false) {
if(nextSlide === 0) {
$homeSlider.find(".slick-cloned:eq(1) video").get(0).currentTime = 0;
$homeSlider.find(".slick-cloned:eq(1) video").get(0).play();
}
if(nextSlide === (getSliderCount() - 1)) {
$homeSlider.find(".slick-cloned:eq(0) video").get(0).currentTime = 0;
$homeSlider.find(".slick-cloned:eq(0) video").get(0).play();
}
getSlideVideoByIndex(nextSlide).play();
}
}
onAfterChange handler:
function afterSlickChange(slick, currentSlide) {
if(currentSlide === 0) {
var $slideVideo = $homeSlider.find(".slick-cloned:eq(1) video").get(0);
getSlideByIndex(currentSlide).find("video").get(0).currentTime = $slideVideo.currentTime
} else if(currentSlide === (getSliderCount - 1)) {
var $slideVideo = $homeSlider.find(".slick-cloned:eq(0) video").get(0);
getSlideByIndex(currentSlide).find("video").get(0).currentTime = $slideVideo.currentTime
}
}
Basically I am resetting the currentTime of both the real and cloned slide videos to 0 and playing them before the slide changes. After the slide changes, I'm setting the currentTime property of the real slide to that of the cloned slide. This makes it so that when the cloned slide disappears, the real slide is playing the same video at the same time and the transition is seamless.

bxSlider - Play/Pause all sliders on page

I have two sliders on a page. Called with the same set of times and settings. One slider is a image slider, the other a sort of caption for it. Both in drastically different areas of the html.
bxslider is creating a play/pause for each slideshow, but I want some way of having one button that pauses all slideshows on the current page. This is because the slideshows are relative to each other and must keep a:
Slider A - Slide 1 / Slider B - Slide 1
Slider A - Slide 2 / Slider B - Slide 2
Slider A - Slide 3 / Slider B - Slide 3
etc.
Right now, when I pause one slideshow, the other continues and when the play is pressed, they are no longer in sync.
.bxslider & .bxslider-content are both my bxslider classes.
Thanks!
<script type="text/javascript">
$(document).ready(function () {
$('.bxslider, .bxslider-content').bxSlider({
mode: 'fade',
auto: true,
ease: 'cubic-bezier(0.42,0,0.58,1)',
pager: false,
controls: false,
autoControlsCombine: true,
autoControls: true,
pause: 8000,
speed: 800
});
});
</script>

Try
var slider=$('.bxslider').bxSlider({
//code here
});
var slider1=$('.bxslider-content').bxSlider({
//code here
});
$(document).on('click','.pause',function(){
slider.stopAuto();
slider1.stopAuto();
});
$(document).on('click','.play',function(){
slider.startAuto();
slider1.startAuto();
});
Fiddle http://jsfiddle.net/CDvmk/