3

我想在 screen.width > 960 时从 Flexslider 2 中删除一个元素，然后将其添加回 screen.width < 960。

有没有办法重新初始化 Flexslider？如果不是，我有什么选择？

这是我正在使用的 js 设置：

$(window).load(function() {
    // Load functions here.
    $('#contentSlider').flexslider({
        animation: "slide",
        animationSpeed: 500,
        direction: "vertical",
        controlNav: true,
        controlsContainer: "#controls",
        directionNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#bgslide",
        start: function(slider){
          $('body').removeClass('loading');
        },
        after: function(slider){
          if (slider.currentSlide == 0) {
            $('.info-link, .signup-link').removeClass('is-active');
            $('.welcome-link').addClass('is-active');
          }
          if (slider.currentSlide == 1) {
            $('.welcome-link, .signup-link').removeClass('is-active');
            $('.info-link').addClass('is-active');
          }
          else if (slider.currentSlide == 2) {
            $('.welcome-link, .info-link').removeClass('is-active');
            $('.signup-link').addClass('is-active');
          }
        }
    });
    $('#bgslide').flexslider({
        animation: "fade",
        animationSpeed: 1000,
        controlNav: false,
        directionNav: false,
        animationLoop: false,
        slideshow: false
    });
});

我也在使用http://wicky.nillia.ms/enquire.js/，我想用它来重新初始化/销毁并构建滑块以在 2 和 3 个幻灯片之间切换。

enquire.register("screen and (min-width: 720px)", {
    match : function() {

        $('body').removeClass('mobile');
        $('body').addClass('desktop');

        // remove Item three Here
    },
    unmatch : function() {
        $('body').removeClass('desktop');
        $('body').addClass('mobile');

        // If item 3 does not exist Add item 3 back in.
    }
});

我的 HTML（使用 slim）设置如下：

#main role="main"
   #controls   
   #contentSlider.flexslider
       ul.slides
          li.item1
          li.item2
          li.item3      

#bgslide.backgrounds
        .gradient
            ul.slides
               li.item1-bg
               li.item2-bg
               li.item3-bg

希望这将使我想要实现的目标更加清晰。

4

0 回答 0