on my portfolio i have some projects (for example http://mathieuserruys.be/art-cinema-offoff-voorjaar-2015/ ). These images are called via a ACF Repeater field, and they are put into a jcycle 2 gallery.
this is the code i use:
<div class="info" style='-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;'
unselectable='on'
onselectstart='return false;'
onmousedown='return false;'><span id="prev">< prev</span><br>
<span id="next">next ></span><span><?php the_post(); ?><?php the_content(); ?></span></div>
<div class="slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=0
data-cycle-center-horz=true
data-cycle-center-vert=true
data-cycle-next="img, #next"
data-cycle-prev="#prev"
data-cycle-swipe=true
data-cycle-loader="true"
data-cycle-manual-speed="1"
data-cycle-caption-template="{{slideNum}}/{{slideCount}}"
>
<div class="cycle-caption"></div>
<?php if( have_rows('images_repeat') ): ?>
<?php while( have_rows('images_repeat') ): the_row();
// vars
$image = get_sub_field('image_repeat');
?>
<img src="<?php echo $image['url']; ?>"/>
<?php endwhile; ?>
<?php endif; ?>
</div>
<script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>
I've noticed that on first load the images appear in random order. and after that, sometimes they are right, sometimes they are not. I guess it has something to do with the Jcycle loading conflicting with how the repeater works.. any tips on this?
The jquery.cycle2.js is called after the jquery.cycle2.carousel.js and jquery.cycle2.tile.js
jquery.cycle2.js has to be available before these 2 scripts.