Responsive Slider 1.0 using WordPress, Advanced Custom Fields Repeater Field, Web Symbols font, and the Cycle2 Slideshow Engine

When I build out custom WordPress themes, I often have to add a custom slideshow on a page. I love building these using the Advanced Custom Fields Plugin and Repeater Field Addon, combined with Cycle2 as my slideshow engine behind the scenes.

Here’s a simple image slider that I use as a basis for more advanced jQuery sliders when I build them out. I often start with the basics below, and build up extra functionality from there if needed. I use this on my WordPress sites.

The code below is intended for those who know how to develop for WordPress, and is not intended as a complete step by step guide. If however you are working with this code and have any questions about it, just ask your question in the comments below and I’ll gladly help out.

You can see a working version of this here near the top of the page.

Tools Required: WordPress, Advanced Custom Fields Plugin, Advanced Custom Fields Repeater Field, jQuery Cycle2, Cycle2 Swipe Addon, the Web Symbols Font, HTML, PHP, and CSS

The HTML & the PHP

In the basic html & php here, I set up the slideshow container with an id of #my-slider, check if there’s a repeater field called ‘slideshow’, display the Cycle2 slideshow with some basic settings, loop through the images in the WordPress custom repeater field called ‘slider_image’ echoing them out to the page, display next & previous links, display a pager, then close it all up. This goes right into a WordPress page template that I am building.

[raw]


Image <?php echo $i; ?>

The CSS

Here is the basic styles that I start out with. I’ll change them up and add more on different slideshows that I set up.


#my-slider { 
	position: relative;
	width: 95%;
	max-width: 1000px;
	padding-bottom: 100px;
	margin: 50px auto;
}

#my-slider img {
	width: 100%; 
	max-width: 100%;
}

#my-slider .next, 
#my-slider .prev {
	position: absolute;
	top: 50%;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	font-size:30px;
	color: rgba(255,255,255,0.8);
	z-index: 2;
}

#my-slider .next:hover,
#my-slider .prev:hover { color:rgba(255,255,255,1.0); }

#my-slider .next {right:-40px;}
#my-slider .prev {left:-40px;}

#my-slider .pager {
	position: absolute;
	width: auto;
	left: 50%;
	bottom: 30px;
	text-align: center;
	z-index: 2;
}

#my-slider .pager span {
	display:inline-block;
	height:4px;
	width:20px;
	background:rgba(255,255,255,0.6);
	text-indent: -99999px;
	margin: 0 5px;
	cursor:pointer;
}

#my-slider .pager span.cycle-pager-active { background:#FFF; }


[/raw]

After you have Cycle2 installed and have created your Repeater Field in WordPress and populated it with images, your slideshow will spring to life.

** IMPORTANT ** In order to make this all work, you need to be running the Advanced Custom Fields Repeater Field on an installation of WordPress, and have the Cycle2 jQuery file loaded on the page, and have the Web Fonts font installed on your website.

2 comments on “Responsive Slider 1.0 using WordPress, Advanced Custom Fields Repeater Field, Web Symbols font, and the Cycle2 Slideshow Engine

Leave a Reply

Your email address will not be published. Required fields are marked *