我有一个 while 循环,使用 slick slider 多个项目格式显示帖子。
这显示并工作没有问题。
我希望能够在视口小于 481 像素时“禁用”光滑滑块功能并仅列出帖子。
我有一个条件 javascript 函数(如下)来定位小于 481px 的视口
jQuery(window).on('resize',function()
{
var viewportWidth = jQuery(window).width();
if (viewportWidth < 481)
{
}
else
{
}
});
我添加了一些 jquery 来删除 multiple-items、slick-slider 和 slick-initialized 类。幻灯片消失。我想继续显示所有帖子。
有人可以给我指出正确的方向,告诉我如何在小于 481 像素的视口上查看网站时停用平滑滑块功能吗?
完整代码:
<div id="box" class="multiple-items">
<?php
while($search_results_featured_users->have_posts()) : ?>
<div>
<a href="<?php the_permalink();?>">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</a>
</div>
<?php
endwhile;
wp_reset_postdata(); ?>
</div>
<script>
jQuery(document).ready(function(){
// on screen resize
jQuery(window).on('resize',function()
{
var viewportWidth = jQuery(window).width();
if (viewportWidth < 481)
{
jQuery("#box").removeClass("multiple-items slick-initialized slick-slider");
}
else
{
}
});
jQuery('.multiple-items').slick({
infinite: true,
slidesToShow:6,
slidesToScroll: 2,
autoplay: true,
autoplaySpeed: 5000,
pauseOnHover: false,
dots: false,
arrows: true,
speed: 500,
cssEase: 'linear',
});
});
</script>
非常感谢任何帮助。
您可以使用
unslick
方法来销毁 Slick 滑块
$(element).slick('unslick');
例如
jQuery(window).on('resize', function() {
var viewportWidth = jQuery(window).width();
if (viewportWidth < 481) {
$('.multiple-items').slick('unslick');
} else {
// Do some thing
}
});
responsive: [
{
breakpoint: 4000,
settings: "unslick",
},
]
此选项在 0-4000px 分辨率上禁用滑块,您可以在示例 1024px 上启用滑块,如下所示:
responsive: [
{
breakpoint: 4000,
settings: "unslick",
...
},
{
breakpoint: 1024,
settings: "slick",
...
},
]
这是正确的unslick,控制台中没有错误。纯JS上。对我来说就像一个魅力。
var $carousel = $(".multiple-items");
function showSliderScreen($widthScreen) {
// console.log($widthScreen);
if ($widthScreen <= "481") {
if (!$carousel.hasClass("slick-initialized")) {
$carousel.slick({
infinite: true,
slidesToShow: 6,
slidesToScroll: 2,
autoplay: true,
autoplaySpeed: 5000,
pauseOnHover: false,
dots: false,
arrows: true,
speed: 500,
cssEase: 'linear',
});
}
} else {
if ($carousel.hasClass("slick-initialized")) {
$carousel.slick("unslick");
}
}
}
var widthScreen = $(window).width();
$(window).on("ready load resize", function () {
widthScreen = $(window).width();
showSliderScreen(widthScreen);
});
我在这里找到了它:https://github.com/kenwheeler/slick/issues/369#issuecomment-57332974