Question

考虑以下代码：

<?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>

Answer 1

有时我觉得自己很蠢。我需要一个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: "",
    });
});

如何动态创建多个Flexslider幻灯片

1 个答案: