SlickJS, unslick () remove issue
Good day,
I am currently working and using SlickJS Carousel , I am trying to remove multiple items when the window width is more than 375 using a unslick();
fragment.
I see a resize function that works when the window size is less than the 375 carousel slick();
without any problem.
If anyone can figure out what's going wrong, please let me know.
Thank.
Js
$(document).ready(function () {
// Header Slider
$('.touchslider_one').slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 3000,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
cssEase: 'linear',
});
onresize();
$(window).resize(function () {
onresize();
});
});
function onresize(){
checkWidth();
}
function checkWidth() {
if ($(window).width() < 376 ) {
// Boxes
$('.touchslider_fourth').slick({
autoplay: false,
infinite: true,
speed: 1500,
adaptiveHeight: true,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
// Featured Products
$('.touchslider_three').slick({
autoplay: false,
infinite: true,
speed: 1500,
adaptiveHeight: true,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
// Logos
$('.touchslider_two').unslick();
$('.touchslider_two').slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 6000,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
} else {
// Test
console.log('Larger than 375');
// Remove
$('.touchslider_fourth').unslick();
$('.touchslider_three').unslick();
$('.touchslider_two').unslick();
// Rebuild
$('.touchslider_two').slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 6000,
dots: false,
slidesToShow: 5,
slidesToScroll: 5,
cssEase: 'linear'
});
}
}
After talking with Ken Wheeler and reading a couple of Github it looked like wtran got the answer I was looking for, although I had to tweak to fit my requirements pretty much the first time around .
I can now trigger unslick();
when the window resizes to a specific width and rebuilds the carousel if the window is less than a specific width.
I would also like to thank Ken Wheeler for the tweets and tips!
Js
$(document).ready(function () {
touchsliderone();
onresize();
$(window).resize(function () {
onresize();
});
});
// Resize
function onresize () {
touchslidertwo();
touchsliderthree();
touchsliderfour();
}
// Header Carousel
function touchsliderone() {
$('.touchslider_one').slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 3000,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
cssEase: 'linear',
});
}
// Boxes Carousel
function touchsliderfour() {
var $touchsliderfour = $('.touchslider_four');
if ($(window).width() < 376) {
if($touchsliderfour.hasClass('slick-initialized')) {
$touchsliderfour.unslick();
}
$touchsliderfour.slick({
autoplay: false,
infinite: true,
speed: 1500,
adaptiveHeight: true,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
} else {
if($touchsliderfour.hasClass('slick-initialized')) {
$touchsliderfour.unslick();
}
}
}
// Featured Products Carousel
function touchsliderthree() {
var $touchsliderthree = $('.touchslider_three');
if ($(window).width() < 376) {
if($touchsliderthree.hasClass('slick-initialized')) {
$touchsliderthree.unslick();
}
$touchsliderthree.slick({
autoplay: false,
infinite: true,
speed: 1500,
adaptiveHeight: true,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
} else {
if($touchsliderthree.hasClass('slick-initialized')) {
$touchsliderthree.unslick();
}
}
}
// Logos Carousel
function touchslidertwo() {
var $touchslidertwo = $('.touchslider_two');
if ($(window).width() < 376) {
if($touchslidertwo.hasClass('slick-initialized')) {
$touchslidertwo.unslick();
}
$touchslidertwo.slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 6000,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
} else {
if($touchslidertwo.hasClass('slick-initialized')) {
$touchslidertwo.unslick();
}
$touchslidertwo.slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 6000,
dots: false,
slidesToShow: 5,
slidesToScroll: 5,
cssEase: 'linear'
});
}
}