[英]Slick.js - Responsive breakpoint custom function
I'm trying to launch an event when Slick.js
breakpoint gets triggered.当
Slick.js
断点被触发时,我试图启动一个事件。
The init
event gets triggered even if the breakpoint is not hit.即使未命中断点,也会触发
init
事件。
Is there a way around it?有办法解决吗?
Here is my code:这是我的代码:
var $j = jQuery.noConflict();
$j(".homepage_slider").slick({
dots: false,
infinite: true,
arrows:false,
autoplay:true,
autoplaySpeed:3500,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 480,
settings: {
init: changeImages()
}
}
]
});
function changeImages(){
$j('img.slider-image').each(function() {
$j(this).attr('src', $j(this).attr('data-mobile'));
});
}
I also tried this but it didn't work:我也试过这个,但没有用:
$j('.homepage_slider').on('breakpoint', function(){
console.log("test");
$j('img.slider-image').each(function() {
$j(this).attr('src', $j(this).attr('data-mobile'));
});
});
Any ideas?有任何想法吗?
UPDATE :更新:
Found this post: how to call different jquery actions in responsive design找到这篇文章:如何在响应式设计中调用不同的 jquery 动作
var isBreakPoint = function (bp) {
var bps = [320, 480, 768, 1024],
w = $j(window).width(),
min, max
for (var i = 0, l = bps.length; i < l; i++) {
if (bps[i] === bp) {
min = bps[i-1] || 0
max = bps[i]
break
}
}
return w > min && w <= max
}
if (isBreakPoint(480)) {
$j('img.slider-image').each(function() {
$j(this).attr('src', $j(this).attr('data-mobile'));
});
}
This workaround works, but would be nice if I found one that works whenever Slick.js
breakpoint event is hit so there is no discrepancy between two methods.这种解决方法有效,但如果我发现一种在
Slick.js
断点事件被击中时Slick.js
方法会很好,因此两种方法之间没有差异。
Look at the «Events» section of the Slick's documentation :查看Slick 文档的“事件”部分:
In slick 1.4, callback methods have been deprecated and replaced with events.
在 slick 1.4 中,回调方法已被弃用并替换为事件。
<...><...>
breakpoint断点
Arguments: event, slick, breakpoint.参数:事件,光滑,断点。
Fires after a breakpoint is hit.在遇到断点后触发。
So you need to take two steps:所以你需要采取两个步骤:
responsive
option.responsive
选项设置您需要的断点。breakpoint
event and do whatever you want.breakpoint
事件并做任何你想做的事。 For example:例如:
var $myCarousel = $('#myCarousel'); /* Step 1 */ $myCarousel.slick({ autoplay: true, dots: true, responsive: [ { breakpoint: 500 }, { breakpoint: 768 }, { breakpoint: 992 } ] }); /* Step 2 */ $myCarousel.on('breakpoint', function(event, slick, breakpoint) { console.log('breakpoint ' + breakpoint); });
/* Decorations */ .my-carousel img { width: 100%; } .my-carousel .slick-next { right: 15px; } .my-carousel .slick-prev { left: 15px; z-index: 1; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css"> <div id="myCarousel" class="my-carousel"> <div> <img src="https://via.placeholder.com/900x300/c69/f9c/?text=1" alt=""> </div> <div> <img src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt=""> </div> <div> <img src="https://via.placeholder.com/900x300/69c/9cf/?text=3" alt=""> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>
const $slick = $(".health-slick .items");
const $slick_item = $(".health-slick .items .item");
// INIT
slickInit();
animateHoverItem();
// FUNCTIONS
function animateHoverItem() {
$slick_item.mouseover(function() {
$(this).addClass('animate');
});
$slick_item.mouseout(function() {
$(this).removeClass('animate');
});
console.log(0); // this will call 1 time and 1 time when breakpoint window change
}
function slickInit() {
$(document).ready(function () {
$slick.slick({
slidesToShow: 5,
slidesToScroll: 1
responsive: [
{
breakpoint: 767.98,
settings: {
slidesToShow: 2,
},
},
{
breakpoint: 575.98,
settings: {
slidesToShow: 1,
},
}
],
});
$slick.on('breakpoint', function(e){
animateHoverItem();
});
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.