Force cloning slides in slick - javascript

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);
}
});

Related

Slick JS Custom Navigation not functioning

I have a basic slickJS 1.8 Carousel and trying to modify how pagination looks. There are many stackoverflow similar questions however none worked for me. Carousel works, I can swipe on left and right, dots work fine however I'd like to achieve this presentation when it comes to navigation <- 1/3 -> (where -> or <- is an icon) Here is the setup
var $status = $('.count');
var $slickElement = $('.carousel');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
var i = (currentSlide ? currentSlide : 0) + 1;
$status.html('<button type="button" class="custom-prev"><</button>' + '<span class="current_slide">' + i + '</span> / <span class="total_slides"> ' + slick.slideCount + '</span>' + '<button type="button" class="custom-next">></button>');
});
$('.carousel').slick({
infinite: false,
speed: 300,
slidesToShow: 4.5,
slidesToScroll: 4,
arrows: true,
nextArrow: $('.custom-next'),
prevArrow: $('.custom-prev'),
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
]
});
Next and Previous buttons appear however navigation to next slides don't work but dots work. Disabled dots for didn't make any difference to my custom next and previous buttons, is there anything I'm doing wrong? I'm not a JS expert hence some guidance would be appreciated.
You can fix this with a few amends here but you will still need to tweak it to get the presentation you want. See comments in code for explanation.
Example: https://codepen.io/alexpetergill/pen/56c63447c77c07e84407f08016cf17b2
var $status = $('.count');
var $slickElement = $('.slick-slider');
// You only need to add the controls on init. Anything more will probably result in issues with behaviour.
$slickElement.on('init', function () {
$status.before('<button type="button" class="custom-prev"><</button>' + '<button type="button" class="custom-next">></button>');
});
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
var i = slick.currentSlide + 1; // This will get you the current slide on init.
$status.html('<span class="current_slide">' + i + '</span> / <span class="total_slides">' + slick.slideCount + '</span>');
});
// I've simplified this for sake of example. You have to bare in mind that if your slidesToShow is more than 1 then your numbered pagination probably wont work how you expect as the number will reflect the first item in a row.
$('.slick-slider').slick({
infinite: false,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
nextArrow: $('.custom-next'),
prevArrow: $('.custom-prev'),
});
// Not having the arrow controls within the slick container probably results in the event listeners not being added. You can simply add them yourself here.
$('.custom-prev').click(function(){
$slickElement.slick('slickPrev');
})
$('.custom-next').click(function(){
$slickElement.slick('slickNext');
})

Making to slide more than one item ahead in OwlCarousel

I having two synced OwlCarousel sliders. The goal is to achieve - group of items sliding in first main slider. Now it's sliding from 1 to 2 to 3 etc. I need it to slide from 1 to 5. Is there some values i can change in js?
https://codepen.io/washaweb/pen/KVRxRW
.owlCarousel({
items : slidesPerPage,
dots: false,
nav: false,
autoplay: false,
smartSpeed: 200,
slideSpeed : 500,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
slideBy: '1', //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
responsiveRefreshRate : 100
And how can i change sliding animation? For example fadein
You could try to.owl.carousel event:
var jumpTo = 5;
$('#sync2').trigger('to.owl.carousel', jumpTo);
Carousel #sync2 jumps to slide number 5. You can trigger this by other owl events or by clicks.

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.

slick carousel 1.4 adaptive height and goto

I'm using Slick Carousel 1.4.1 (https://github.com/kenwheeler/slick) for different sliders on my page (http://www.branders-development.ch/treuco/index_org.php). If you click on the Navigation you'll scroll to the section mentioned and go to the slide inside the carousel. This works, but if you click to the next-button, the hole carousel crashed.
Slick-Code:
$('.clk').click(function(e){
var slideshow = $(this).attr('owl');
var slide = $(this).attr('slide');
if (typeof slide !== typeof undefined && slide !== false) {
$( '#' + slideshow ).slick( 'unslick' );
$('#'+ slideshow).slick({
infinite: true,
speed: 1000,
slidesToShow: 1,
adaptiveHeight: true,
initialSlide: slide
});
}
});
HTML-Navigation:
<li class="first"><a slide="1" owl="sl22" rel="sl22#2" class="clk">Vermögensverwaltung</a></li>
thanks for help
thomas

bx slider : how to disable slide show when only one image is present

I am using bxslider to create a slideshow of my images. The images are updating dynamically. My problem is the sideshow fade-in and fade-out work even only one image is present. How can I stop this ?
bxslider options are
var coverSlider = $('.bxslider').bxSlider({
auto: true,
minSlides: 1,
maxSlides: 1,
pager: false,
speed: 500,
pause: 3000,
autoHover: true,
mode: 'fade',
controls: false
})
I am using reload method to update the slider when a new image is appends or removes
coverSlider.reloadSlider();
this helps me:
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
auto: ($(".bxslider li").length > 1) ? true: false,
pager: ($(".bxslider li").length > 1) ? true: false,
controls: false
});
});
You should check the number of images before reloading, and use destroySlider() method if there is only 1 image.
// Get the quantity of images (add your code if you want an example)
var numberOfImages = ...;
if (numberOfImages > 1) {
coverSlider.reloadSlider();
} else {
coverSlider.destroySlider();
}
Try
var numImgs = $('div.myClassName img').length;
if(numImgs>1)
{
\\Do your bxslider reload here
}
Instead you can use Jquery Selector too like below
jQuery(".image").Length
Hope this helps...
Click here to read about selectors Click
var numImgs = $('div.bxslider img').length;
if (numImgs > 1) {
$('.bxslider ').bxSlider({
controls: true,
...
});
}
This solution works for me
Change auto: true
to
auto: ($('#slidername').children().length < 2) ? false : true
Thanks to https://github.com/stevenwanderski/bxslider-4/issues/607
bx slider : how to disable slide show when only one image is present?
Set auto to false:
var coverSlider = $('.bxslider').bxSlider({
auto:false
})

Categories