Question

我正在尝试为网站构建一个flexslider。

当我删除PHP并手动添加HTML幻灯片时，flexslider可以正常工作。当我使用下面的代码时，它将flex-disabled类添加到我的flex-navigation中，就像它不知道有足够的幻灯片一样，因为如果幻灯片少于最大可见幻灯片，它通常会这样 - 但在我的情况下，有足够的幻灯片，但它仍然像这样。

无效的代码：

<label>Udvalg af farver og varianter</label>
<div class="flexslider varianter">
    <?php 
        print "<ul class='slides'>";
        $images = rwmb_meta( 'rw_variant', 'type=image&size=thumbnail' );
        foreach ( $images as $image )
        {
            echo "<li><div><a href='{$image['full_url']}' title='{$image['title']}' target='_blank' class='zoom' data-rel='prettyPhoto[product-gallery1]'><img src='{$image['url']}' width='{$image['width']}' height='{$image['height']}' alt='{$image['alt']}' /></a></div></li>";
        }
        echo "</ul>";
    ?>
</div>
<script>
jQuery(window).load(function() {
  jQuery('.flexslider.varianter').flexslider({
    animation: "slide",
    animationLoop: true,
    itemWidth: 80,
    itemMargin: 100,
    minItems: 1,
    maxItems: 4,
    directionNav: true
  });
});
</script>

可行的代码：

<label>Udvalg af farver og varianter</label>
<div class="flexslider varianter">
    <ul class="slides">
        <li>Slide1</li>
        <li>Slide2</li>
        <li>Slide3</li>
        <li>Slide4</li>
        <li>Slide5</li>
        <li>Slide6</li>
        <li>Slide7</li>
    </ul>
</div>
<script>
jQuery(window).load(function() {
  jQuery('.flexslider.varianter').flexslider({
    animation: "slide",
    animationLoop: true,
    itemWidth: 80,
    itemMargin: 100,
    minItems: 1,
    maxItems: 4,
    directionNav: true
  });
});
</script>

PHP滑块确实有超过4张幻灯片，这是最大可见幻灯片设置。

这是PHP方式提供的输出：

        <label>Udvalg af farver og varianter</label>
        <div class="flexslider varianter">

        <div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 1000%; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);">
                <li style="width: 105px; float: left; display: block;"><a href="http://nf.derbygges.dk/wp-content/uploads/2015/03/cemento_bianco.jpg" title="cemento_bianco" target="_blank" class="zoom" data-rel="prettyPhoto[product-gallery1]"><img src="http://nf.derbygges.dk/wp-content/uploads/2015/03/cemento_bianco-150x150.jpg" width="150" height="150" alt="" draggable="false"></a></li>
<li style="width: 105px; float: left; display: block;"><a href="http://nf.derbygges.dk/wp-content/uploads/2015/03/cemento_grigio_cassero.jpg" title="cemento_grigio_cassero" target="_blank" class="zoom" data-rel="prettyPhoto[product-gallery1]"><img src="http://nf.derbygges.dk/wp-content/uploads/2015/03/cemento_grigio_cassero-150x150.jpg" width="150" height="150" alt="" draggable="false"></a></li>
<li style="width: 105px; float: left; display: block;"><a href="http://nf.derbygges.dk/wp-content/uploads/2015/03/cemento_mosaico.jpg" title="cemento_mosaico" target="_blank" class="zoom" data-rel="prettyPhoto[product-gallery1]"><img src="http://nf.derbygges.dk/wp-content/uploads/2015/03/cemento_mosaico-150x150.jpg" width="150" height="150" alt="" draggable="false"></a></li>
<li style="width: 105px; float: left; display: block;"><a href="http://nf.derbygges.dk/wp-content/uploads/2015/03/cemento_mosaico_listelli.jpg" title="cemento_mosaico_listelli" target="_blank" class="zoom" data-rel="prettyPhoto[product-gallery1]"><img src="http://nf.derbygges.dk/wp-content/uploads/2015/03/cemento_mosaico_listelli-150x150.jpg" width="150" height="150" alt="" draggable="false"></a></li>
<li style="width: 105px; float: left; display: block;"><a href="http://nf.derbygges.dk/wp-content/uploads/2015/03/cemento_antracite.jpg" title="cemento_antracite" target="_blank" class="zoom" data-rel="prettyPhoto[product-gallery1]"><img src="http://nf.derbygges.dk/wp-content/uploads/2015/03/cemento_antracite-150x150.jpg" width="150" height="150" alt="" draggable="false"></a></li>     </ul></div><ol class="flex-control-nav flex-control-paging"></ol><ul class="flex-direction-nav"><li><a class="flex-prev flex-disabled" href="#" tabindex="-1">Previous</a></li>
<li><a class="flex-next flex-disabled" href="#" tabindex="-1">Next</a></li></ul></div>
        <script>
        jQuery(window).load(function() {
          jQuery('.flexslider.varianter').flexslider({
            animation: "slide",
            animationLoop: true,
            itemWidth: 80,
            itemMargin: 100,
            minItems: 1,
            maxItems: 4,
            directionNav: true
          });
        });
        </script>

        </div>

开发网站的链接：http://nf.derbygges.dk/butik/fliser-og-klinker/granit/

Flexslider无法使用循环

0 个答案: