Customizing the Slick Carousel for WordPress Genesis with Advanced Custom Fields

For a client project, I needed a slider like this:

I needed to find or build a very close match because the client had already approved this exact look on the home page design.

I looked through scores of WP plugins, sliders, galleries, carousels, and rotators. Nothing seemed similar. Though I can work with PHP, HTML, and CSS, I knew I couldn’t build the JS functionality from scratch.

What to do?

Reach Out

I finally reached out to a colleague I met at WordCamp Lancaster 2015, asking if he could build it. The good thing about asking is that it forced me to write out what I needed. Here’s what I realized the slider needed to do:

• rotate 9-12 images
• loop slides (not jump to beginning after final slide)
• arrows to slide back and forth (does not slide on its own)
• faded slides to the left and right (and completely appear as screen widens)
• slides link to a WP page of my choice (can be a featured image)
• show caption or text (if not, I can have the words as part of the image)
• responsive (in a way you think will work)

My colleague gave some great suggestions, including the Slick Carousel.

Slick Carousel

And, oh, joy, the Center Mode was just what I was looking for!

It included most of the functionality I needed for the js part. With the center slide looking differently from all the others, I figured I could use that on the 3 center slides for full color and fade out the outer slides.

With HTML, I could add the text. With CSS, I could change the location of the arrows. And with Advanced Custom Fields, I could give the client an easy interface to add and remove the content right from the home page Edit screen.

And I would have to add Slick to my theme, since it wasn’t a WP plugin.

Sneak peek at final look

Using Slick, here’s what the final slider / carousel looked like:

And here is the responsive look, using Chrome Inspector:

So, how to do that?

Step by Step

Slick gives instructions for adding the code to your website. Basically, there are 4 parts to it:

• HTML markup, which I put in the home page template my-theme/front-page.php (see page templates for other types of WP pages)
• CSS styles, which I put directly into my theme’s style.css (for this tutorial, I actually call it from a separate file)
• JS for Slick, downloaded here
• Initialization script for Center Mode, which appears on the site just below the Center Mode demo

But I couldn’t get it working right, so I grabbed the CSS and HTML from

Final Code

PHP Code in my-theme/front-page.php (for sliders not on the home page, see WP Page Templates)

<?php

add_action( 'wp_enqueue_scripts', 'sm_enqueue_slick_scripts' );
function sm_enqueue_slick_scripts() {

	wp_enqueue_style( 'slick-css', get_bloginfo( 'stylesheet_directory' ) . '/slick-4/slick-style.css' );	

	wp_enqueue_script( 'slick-centermode', get_bloginfo( 'stylesheet_directory' ) . '/slick-4/slick-centermode.js', array( 'jquery' ), '1.0.0', true );

	wp_enqueue_script( 'slick-carousel', get_bloginfo( 'stylesheet_directory' ) . '/slick-4/slick.min.js', array( 'jquery' ), '1.0.0', true );
		
}

//* Add new image sizes
add_image_size( 'Home Slider', 350, 200, TRUE );

add_action( 'genesis_after_header', 'sm_home_page_services' );
function sm_home_page_services() {
	
	$home_services = ''; // init
			
	if( get_field( 'services_slider' ) ) :
	
		$home_services .= sprintf( '<section id="slick-content" class="slick-content"><div class="slider">' );

		while ( has_sub_field( 'services_slider' ) ) : if( get_row_layout() == 'service_item' ):
			
			// Variables
			$service_photo = get_sub_field( 'service_photo' );
			$photo_size = 'Home Slider'; 	
			$service_page_link_id = get_sub_field( 'service_page_link' );
			$service_link = get_permalink( $service_page_link_id );
			$service_caption = get_sub_field( 'service_caption' );
								
			$home_services .= sprintf( '<div><div class="slide-h3"><a href="%s" title="Go to %s">%s<div class="caption-wrap"><div class="caption">%s</div></div></a></div></div>', $service_link, $service_caption, wp_get_attachment_image( $service_photo, $photo_size ), $service_caption);

		endif; endwhile;
	  
		$home_services .= sprintf( '</div></section>' );
		
		echo $home_services;

	endif;  

}

genesis();

CSS for slider (I enqueued it on the page, but you can also add these styles directly to your main stylesheet)

/* Basic Styles */
body {
    background-color: #f2f2f2;
    color: #000000;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 19px;
    line-height: 1.625;
}

/* Slick Carousel Slider */
.slick-content {
    overflow: hidden;
}

.slider {
    width: 1173px;
    height:200px;
    margin: 20px auto;
    text-align: center;
}

.slick-slider {
    position: relative;
    display: block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-prev,
.slick-next {
    background: url(images/arrow-services.png) 16px center no-repeat #860000;
	border: none;
    border-radius: 50%;
    bottom: 6px !important;
    box-shadow: none;
    color: transparent;
	cursor: pointer;
    display: block;
    font-size: 0;
    line-height: 0;
    height: 40px;
    margin-top: -20px;
    outline: none;
    padding: 0;
    position: absolute;
    top: 50%;
	width: 40px;
    z-index: 2;
}

.slick-prev {
    left: 37px;
}

.slick-next {
    background-position: -13px center;
    right: 41px;
}

.slick-prev:hover,
.slick-prev:focus {
    background: url(images/arrow-services.png) 16px center no-repeat #860000;
	border: none;
    left: 34px;
}

.slick-next:hover,
.slick-next:focus {
    background: url(images/arrow-services.png) -13px center no-repeat #860000;
	border: none;
    right: 38px;
}

.slide-h3 .caption-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.6);
    color: white;
    margin: 0;
    display: block;
    width: 100%;
    line-height: 1.4em;
}

.slide-h3 .caption {
    color: white;
    font-size: 21px;
    font-weight: bold;
    padding: 9px 2px;
}

.slide-h3 a:hover .caption-wrap {
    background: rgba(0,0,0,0.8);
}

.slick-list {
    position: relative;
    display: block;
/*     overflow: hidden; */
    margin: 0;
    padding: 0;
    margin-right: 1px;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-slide {
    display: none;
    float: left;
	opacity: .1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; /* IE 8 */
    height: 200px;
    min-height: 1px;
    position: relative;
    margin-right: 1px;
}

.slick-active {
    opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 */
}

.slick-track {
    display: block;
    position: relative;
    top: 0;
    left: 0;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { 
	display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

.slick-loading .slick-list {
    background: #fff url('images/ajax-loader.gif') center center no-repeat;
}

@media only screen and (max-width: 1150px) {

	.slider {
	    width: 400px;
	    height:200px;
	    margin: 20px auto;
	    text-align: center;
	}
	.slide-h3 .caption-wrap {
    	background: black;
    }
}

 

The main JS for initialization. (customized from the CenterMode js)

jQuery(function( $ ){
	
    $('.slider').slick({
		centerMode: true,
		centerPadding: '60px',
		slidesToShow: 3,
		speed:1500,
		index: 2,
		responsive: [{
		    breakpoint: 1150,
		    settings: {
		    	slidesToShow: 1
		    }
		}]
	});
    		
});