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
}
}]
});
});
Leave a Reply