Slideshows with Cycle2 & ACF

Creating slideshows with Cycle2 & Advanced Custom Fields.

Other References used in this chunk

ACF Repeater
Cycle2
Cycle2 Carousel
Font-Awesome

Useful data attributes

• data-cycle-auto-height="container" – Adjusts the height to the content.
• data-cycle-auto-height="calc" – Sets the height to the biggest slide.

Basic Usage

For basic usage you will need to have jQuery and the Cycle2 Javascript Plugin installed.
The important parts of this code are class="cycle-slideshow" and the data-cycle-... settings.

<div class="slideshow">
<div class="cycle-slideshow" data-cycle-fx=fade data-cycle-timeout=7000 data-cycle-swipe=true data-cycle-slides=".slide" >
	<!-- Navigation -->
	<div class="cycle-pager"></div>
	<div class="cycle-prev"></div>
	<div class="cycle-next"></div>
	<!-- Slides -->
	<div class="slide">Image</div>
	<div class="slide">Image</div>
	<div class="slide">Image</div>
</div>
</div>

Basic Usage with ACF Repeater

This example is showing the ACF Repeater field being used for the Slideshow.

<?php if ( have_rows('slideshow') ): ?>
<div id="slideshow">
<div class="cycle-slideshow" data-cycle-fx=fade data-cycle-timeout=7000 data-cycle-swipe=true data-cycle-slides=".slide" >
	<?php while ( have_rows('slideshow') ) : the_row();
	$img = get_sub_field('image');
	$txt = get_sub_field('caption');
	?>
	<div class="slide" style="background-image: url(<?php echo $img['sizes']['Slide'] ?>);">
		<h2><?php echo $txt ?></h2>
	</div>
	<?php endwhile; ?>
</div>
</div>
<?php endif; ?>

Cycle2 Add-ons:

These Add-ons are for showing navigation.

<div class="cycle-pager"></div>
<div class="cycle-prev"><i class="fa fa-angle-left"></i></div>
<div class="cycle-next"><i class="fa fa-angle-right"></i></div>

And now this is how to only show these add-ons if there are more than 1 slides. The get_field('slideshow') is the name of our ACF Repeater field.

<?php $count = count( get_field('slideshow') ); ?>
<?php if ( $count > 1 ) : ?>
<div class="cycle-pager"></div>
<div class="cycle-prev"><i class="fa fa-angle-double-left"></i></div>
<div class="cycle-next"><i class="fa fa-angle-double-right"></i></div>
<?php endif; ?>

Carousel Slideshow

Carousels allow us to show multiple slides at once.

<div class="cycle-slideshow" data-cycle-fx=carousel data-cycle-carousel-visible=6 data-cycle-carousel-fluid=true data-cycle-timeout=7000 data-cycle-swipe=true data-cycle-slides=".logo" >
	<div class="logo"></div>
	<div class="logo"></div>
	<div class="logo"></div>
	<div class="logo"></div>
	<div class="logo"></div>
	<div class="logo"></div>
</div>

Random Slides

You can display the slides randomly by adding data-random=true to the slideshow.

<div class="cycle-slideshow" data-cycle-fx=fade data-cycle-timeout=7000 data-cycle-swipe=true data-random=true data-cycle-slides=".slide" >
	<div class="slide">item_1</div>
	<div class="slide">item_2</div>
	<div class="slide">item_3</div>
</div>