0

考虑这段代码：

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

1 回答 1

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: "",
    });
});
于 2013-10-23T18:05:09.910 回答