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(スリムを使用)のセットアップは次のとおりです。
#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
うまくいけば、私が達成しようとしていることについて、物事が少し明確になるでしょう。