下午好,
我目前正在工作并使用 SlickJS 轮播,当窗口宽度大于 375 时,我正在使用unslick();
代码段尝试删除几个项目。
我可以看到调整大小功能在窗口大小小于 375 时工作,slick();
轮播显示没有任何问题。
如果有人能看到出了什么问题,请告诉我。
谢谢。
.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'
});
}
}
试试这个:
$('.your-slider').slick('unslick');
在与 Ken Wheeler 交谈并阅读了几个 Github 问题后,看起来 wtran 得到了我正在寻找的答案,尽管我必须进行调整以满足我的要求,但它几乎第一次就有效。
我现在能够在窗口在特定宽度上调整大小时触发unslick();
,如果窗口大小小于特定宽度,则重新构建轮播。
我还要感谢Ken Wheeler的推文和建议!
.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'
});
}
}