Я начну с этого, сказав, что я не очень хорошо знаком с Cycle2, просто компания, с которой я работаю, случайно использует ее на своем сайте.JQuery Cycle2 отображает только одно изображение
В любом случае, он больше не отображает несколько изображений в карусели, не уверен, почему. Это интеграция WordPress.
http://www.wolfbrewingcompany.com/beers/core-range/
А вот код со страницы вызова ползунок
<div class="post" id="post-<?php the_ID(); ?>">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/jquery.cycle2.carousel.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/jquery.cycle2.swipe.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/ios6fix.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.beers-slideshow').cycle();
//$('.beers-slideshow .beer_name').hide();
$('.beers-slideshow img')
.mouseenter(function() {
$(this).parent().next().show();
})
.mouseleave(function() {
$(this).parent().next().hide();
});
});
</script>
<div class="beers_bg">
<div class="beers_wrapper">
<?php
$count = 0;
$html = '';
if(have_rows('beer_slider')):
while (have_rows('beer_slider')) : the_row();
$html .= '<div>
<a href="'.get_sub_field('beer_url').'"><img src="'.get_sub_field('beer_image').'" width="270" height="530" alt="'.get_sub_field('beer_name').'" /></a>
<div class="cycle-overlay">
<div class="beer_name">'.get_sub_field('beer_name').'</div>
</div>
</div>';
$count ++;
endwhile;
endif;
?>
<div class="beers-slideshow"
data-cycle-fx="carousel"
data-cycle-timeout="0"
data-cycle-pause-on-hover="true"
data-cycle-slides="> div"
data-cycle-carousel-visible="<?php echo $count < 3 ? $count : 3 ?>"
data-allow-wrap="false"
data-cycle-carousel-fluid="false"
data-cycle-swipe="true"
data-cycle-next=".beers-next"
data-cycle-prev=".beers-prev"
>
<?php echo $html ?>
</div><!-- end of .beers-slideshow -->
<?php if ($count > 3): ?>
<span class="beers-prev"></span>
<span class="beers-next"></span>
<?php endif ?>
</div><!-- end of .beers_wrapper -->
</div><!-- end of .beers_bg -->
</div><!-- end of div post -->
Это должно быть отображение 3 пива, и прокрутке.
JQuery является 1.9.2, и карусель загружается после cycle2. – SeanEnns