Coding a User Friendly Carousel Slider in WordPress

This tutorial uses Slick and Advanced Custom Fields Pro to code a user friendly carousel slider in WordPress. It uses the gallery field from which a user can easily add or change order of slides without having to touch the code.

The example slider in this tutorial will use the Multiple Items Layout in Slick.

carousel-acf-slider

Getting Slick in order

Download the latest Slick version.

Move into your CSS directory – slick.css, slick-theme.css, fonts, ajax-loader.gif

Move into your JS directory – slick.min.js

Create a slick-init.js file and also file in JS directory and add in…

jQuery(document).ready(function($){
$('.team-items').slick({ //add in your correct containing element
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
});

In this example above I am using .team-items as my containing element.

Enqueue the Styles and Scripts in WordPress

In your functions.php file add in…

<?php //<~ don't add me in
add_action( 'wp_enqueue_scripts', 'themeprefix_slick_enqueue_scripts_styles' );
// Enqueue Slick scripts and styles
function themeprefix_slick_enqueue_scripts_styles() {
wp_enqueue_script( 'slickjs', get_stylesheet_directory_uri() . '/js/slick.min.js', array( 'jquery' ), '1.6.0' true );
wp_enqueue_script( 'slickjs-init', get_stylesheet_directory_uri(). '/js/slick-init.js', array( 'slickjs' ), '1.6.0', true );
wp_enqueue_style( 'slickcss', get_stylesheet_directory_uri() . '/css/slick.css', '1.6.0', 'all');
wp_enqueue_style( 'slickcsstheme', get_stylesheet_directory_uri(). '/css/slick-theme.css', '1.6.0', 'all');
}
view raw slick.php hosted with ❤ by GitHub

Creating the Gallery Field in ACF

carousel-acf-create-slider-field

In ACF Pro’s custom fields, create a field label and name and set the type to Gallery as a minimum, there are some other fields you can set.

carousel-acf-create-slider-field-page-team

Then set the location where the fields should show up, above I am setting it to a regular page, which I am showing some team shots.

Adding the Images

carousel-acf-gallery-items

Now in your page add in your images.

Output the Slider Code

ACF has the code on the website to output the gallery images in a couple of formats and Slick has the HTML mark up and jquery code you need to output, you just need to merge them together.

So for any WordPress theme add to your template…

<?php // <~ don't add me
//Fields
//team_portfolio = Gallery Field
function themeprefix_team_slider() {
$images = get_field('team_portfolio');//add your correct filed name
if( $images ): ?>
<div class="team-items">
<?php foreach( $images as $image ): ?>
<div>
<a href="/team"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
</div>
<?php endforeach; ?>
</div>
<?php endif;
}

or to hook into a Genesis theme by adding in a page template or functions.php, example below is using a page template

<?php // <~ keep me in
add_action('genesis_entry_content','themeprefix_team_slider' );
//Fields
//team_portfolio = Gallery Field
function themeprefix_team_slider() {
$images = get_field('team_portfolio');//add your correct filed name
if( $images ): ?>
<div class="team-items">
<?php foreach( $images as $image ): ?>
<div>
<!-- I have added a link around my images to point to the main team page - just remove the links if not required -->
<a href="/team"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
</div>
<?php endforeach; ?>
</div>
<?php endif;
}
genesis();

That’s it – to change the slider behaviour there are many layout and setting options that you can alter in the slick-init.js file – documentation on the Slick site.

I have done another example with a Slider Syncing Layout.

Leave a Comment





%d bloggers like this: