我想在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
希望这会使我想要达到的目标更加清晰。