最近在仿做一个网站,有几个轮播图是基于superslide实现的,纯HTML是没问题,但是使用vue就发现轮播图全部失效,无法轮播。

最后看了一段代码,得到启发:

 1 $(document).ready(function(e) {
 2     $(".banner").slide({
 3         mainCell:".bd ul",
 4         titCell:'.hd ul',
 5         autoPlay:true,
 6         autoPage:true,
 7         effect:"topLoop",
 8         easing:"easeOutCirc"
 9     });
10 });

在页面加载完成后再调用superslide相关函数

想到vue组件的生命周期,与$(document).ready相符合的是mounted方法

在组件中添加mounted方法,里面调用superslide相关函数

mounted:function () {
    $(".banner").slide({
        mainCell:".bd ul",
        titCell:'.hd ul',
        autoPlay:true,
        autoPage:true,
        effect:"topLoop",
        easing:"easeOutCirc"
    });    
}

轮播生效,问题解决,放在created方法里是不行的

相关文章:

  • 2021-06-11
  • 2021-11-26
  • 2022-12-23
  • 2021-06-02
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-09
  • 2021-11-26
  • 2021-11-19
相关资源
相似解决方案