CODEWITHSUNDEEP
javascriptjqueryslick.js
M1lls
M1lls

Reputation: 573

Slick slider remove last slide if winWidth < 500

Using slick slide, I'm trying to remove the last slide (slide 6) if the window width is less than 500.

I have set up slick slider here - JS Fiddle Slick Slider

According to the documentation, the slideRemove function is the following Javascript

$('.add-remove').slick({
  slidesToShow: 3,
  slidesToScroll: 3
});
$('.js-add-slide').on('click', function() {
  slideIndex++;
$('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
});

$('.js-remove-slide').on('click', function() {
$('.add-remove').slick('slickRemove',slideIndex - 1);
 if (slideIndex !== 0){
 slideIndex--;
}
});

I need help with changing the .on('click') function from the docs to change at 500 winWidth.

Upvotes: 1

Views: 2603

Answers (2)

sneaky
sneaky

Reputation: 447

Another idea: If screen size is changed again to bigger size, the slide 6 is still not there (because it was removed before). You can use slick filters (for example ":even" or ":last-of-element"):

function checkSizeAndFilterSlickDivs(elementId){
            if($(document).width()<500)
            {
                $(elementId).slick('slickFilter',':even');
            }
            else {
                $(elementId).slick('slickUnfilter');
            }
        }
checkSizeAndFilterSlickDivs('.add-remove');
                        $(window).resize(function(){
                            checkSizeAndFilterSlickDivs('#offer-' + idOfElement + '-div');
});

This helped me changing from small/medium screen sizes to big size and still having all slick divs available.

Upvotes: 0

pratikpawar
pratikpawar

Reputation: 2098

you need 2 events one on window resize and one on load. Also define a variable to store number of slides. 

$(window).resize(function(evt){

    if($(document).width()<500 && noOfSlides > 5)
    {
      alert($( document ).width());
      $('.slider').slick('slickRemove',5);
   }
});

Here I have hardcoded slide 6 to be removed with a check of noOfslides greater than 5.

you could see it working here. https://jsfiddle.net/g7z93ur6/

Upvotes: 3

Related Questions