Я пытаюсь построить flexslider для веб-сайта.
Когда я удаляю PHP и добавляю слайды HTML вручную, flexslider работает как надо.
Когда я использую приведенный ниже код, он добавляет класс flex-disabled к моей flex-навигации, как будто он не знает, что слайдов достаточно, потому что если слайдов меньше, чем максимальное количество видимых слайдов, он обычно будет действовать следующим образом — но в моем случае Есть достаточно слайдов, но все равно действует так.
код, который не работает:
<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/
Задача ещё не решена.
Других решений пока нет …