光滑的轮播“初始化”功能不起作用

Posted 2023-02-25

【中文标题】光滑的轮播“初始化”功能不起作用

【英文标题】：slick carousel 'init' function doesn't work

【发布时间】：2020-08-02 11:32:48

【问题描述】：

我最近使用了 slick 滑块，但是我需要在 slick carousel 初始化后添加一个脚本。 我试过下面的代码 演示代码笔：https://codepen.io/kelvinspaces/pen/bGEXJaG 关于在滑块完全加载后如何运行脚本的任何想法？

//Slick Slider    
$('.slider-container').slick(
      infinite: true,
      slidesToShow: 6,
      slidesToScroll: 6
    );
    

    $('.slider-container').on('init', function (event, slick) 
      alert('test');
      $('.test').css('background-color', 'red'); //RUN the script after slick slider have load completly.
    );

有人知道吗？或者任何人都可以建议一个好的性能并且可以为我完全定制轮播？

【参考方案1】：

您的监听器需要在您初始化光滑滑块之前放置。否则，永远不会调用侦听器，因为您已要求它在事件运行后进行侦听。也就是说，当您初始化平滑滑块时，您的侦听器当前未绑定。

// Bind init event listener function
$('.slider-container').on('init', function (event, slick) 

     code here...

);

// Init your slick slider
$('.slider-container').slick(

     other code here...

);

应该如上。

【讨论】：

这是您的 Codepen 和应用的解决方案：codepen.io/brayden-merrifield/pen/wvMVZYB

嗨，但是像这样的图像还没有加载，我无法获得轮播高度。

我的回答回答了你原来的问题，你没有提到对图像高度的任何需求。如果这是您的主要目标，您可能会更好地为您的图像添加一个事件侦听器并在onload 为图像触发时调用您想要的函数。或者，当文档本身已加载时。