如何動態地創建多個Flexslider幻燈片

考慮以下代碼：如何動態地創建多個Flexslider幻燈片

<?php foreach ($objVideos as $objVideo) : ?> 

    jQuery('#carousel-<?php echo $objVideo->id; ?>').flexslider({ 
     animation: "slide", 
     controlNav: false, 
     animationLoop: false, 
     slideshow: false, 
     itemWidth: 223, 
     itemMargin: 25, 
     asNavFor: '#slider-<?php echo $objVideo->id; ?>', 
     selector: ".slides > li", 
     prevText: "", 
     nextText: "" 
    }); 

    jQuery('#slider-<?php echo $objVideo->id; ?>').flexslider({ 
     animation: "slide", 
     controlNav: false, 
     animationLoop: false, 
     slideshow: false, 
     sync: "#carousel-<?php echo $objVideo->id; ?>", 
     selector: ".slides > li", 
     prevText: "", 
     nextText: "", 
    }); 


<?php endforeach; ?>

正如你可以看到我使用的是PHP循環來創建多個幻燈片。每次通過幾個視頻循環播放（我沒有在Flexslider中顯示視頻，這些是隨視頻播放的幻燈片）。我想知道是否有一種方法來標記HTML，這樣我可以避免循環。我想，有些類型的jQuery選擇器。但我不確定如何將一個變量傳遞給Flexslider，以便我可以同步幻燈片和縮略圖。這是WooThemes的HTML標記。

<!-- Place somewhere in the <body> of your page --> 
<div id="slider" class="flexslider"> 
    <ul class="slides"> 
    <li> 
     <img src="slide1.jpg" /> 
    </li> 
    <li> 
     <img src="slide2.jpg" /> 
    </li> 
    <li> 
     <img src="slide3.jpg" /> 
    </li> 
    <li> 
     <img src="slide4.jpg" /> 
    </li> 
    <!-- items mirrored twice, total of 12 --> 
    </ul> 
</div> 
<div id="carousel" class="flexslider"> 
    <ul class="slides"> 
    <li> 
     <img src="slide1.jpg" /> 
    </li> 
    <li> 
     <img src="slide2.jpg" /> 
    </li> 
    <li> 
     <img src="slide3.jpg" /> 
    </li> 
    <li> 
     <img src="slide4.jpg" /> 
    </li> 
    <!-- items mirrored twice, total of 12 --> 
    </ul> 
</div>

來源

2013-10-23 sehummel

我試過使用一個類，但後來我想不出如何將縮略圖同步到主圖像。 – sehummel

有時我覺得很蠢。一個Javascript循環是我需要的。咄。

jQuery('.image-container').each(function(index) { 
    var id = jQuery(this).attr('data-container'); 
    jQuery('#carousel-' + id).flexslider({ 
     animation: "slide", 
     controlNav: false, 
     animationLoop: true, 
     slideshow: false, 
     itemWidth: 223, 
     itemMargin: 25, 
     asNavFor: '#slider-' + id, 
     selector: ".slideshow > li", 
     prevText: "", 
     nextText: "", 
    }); 

    jQuery('#slider-' + id).flexslider({ 
     animation: "slide", 
     controlNav: false, 
     animationLoop: true, 
     slideshow: false, 
     sync: "#carousel-" + id, 
     selector: ".slideshow > li", 
     prevText: "", 
     nextText: "", 
    }); 
});

來源

2013-10-23 18:05:09 sehummel

如何動態地創建多個Flexslider幻燈片

回答

相關問題