在断点处重新启动flexslider 2

时间:2013-09-15 20:42:40

标签: javascript jquery resize breakpoints flexslider

我想在screen.width>中删除元素形式Flexslider 2。 960然后将其添加回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(使用纤薄)设置如下:

#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

希望这会使我想要达到的目标更加清晰。

0 个答案:

没有答案