Considering that sliders and slider plugins (usually bundled with purchased themes) are quite slow and cumbersome to use, it’s often preferable in many cases to build your own slider to avoid headaches for both you and your clients.
Of course, there are situations where using plugins like Revolution Slider for complex animations is necessary, and indeed, impressive results can be achieved with such plugins. However, in many cases, it’s unnecessary, and beautiful results can be obtained with external libraries (and a bit of JavaScript and CSS).
For example, it can be said that the slider at the top of this page is responsive and looks pretty good, right? Not only does it look good, but you can easily add any content you want to the slider, and there are many options for customization and configuration.
This guide is written from the place where I’m trying to convey the following point: “The more plugins on a site, the more room for issues, slower site loading speed, and a diminished user experience as a result. Beyond that, I just love to write… 🙂
The Vegas Background Slideshow Library
To create the slider, we’ll use the library called Vegas Background Slideshow. This library allows for the creation of full-screen sliders, and I’ve used it quite a few times on the websites I’ve built for clients.
By the way, it’s not mandatory to use it for full-screen sliders; you can easily set the width and height of the slider with a bit of CSS. The Vegas library even supports (experimentally, according to them) full-screen video slides, and beyond that, it includes quite a few cool animations for slider transitions.
The way to activate Vegas is simple. Call the vegas() method on the element you choose. In this call, you also define the options with which it will operate, and it looks more or less like this in its basic form:
$("YOUR_ELEMENT").vegas({
slides: [
{ src: "/path/image1.jpg" },
{ src: "/path/image2.jpg" },
{ src: "/path/image3.jpg" }
],
});The slides option is where you define the URLs of the background images of the slides, and the number of slides created will correspond to the number of images you add.
For the library, there are interesting options. Here are some of them:
- timer – Sets whether a timer bar will appear between slides at the bottom of the slider.
- delay – Sets the time between slides.
- animationDuration – Duration of the slide animation.
- shuffle – Displays slides in random order.
- transition – Type of transition between slides.
Now let’s see the steps to create a slider in WordPress using Vegas Background Slideshow. If you missed above, we’re going to create something in this style but covering the entire screen:
Loading the Vegas Library
Download the vegas library and copy the following files from the ZIP file to your theme’s child directory:
- The
vegas.min.jsscript - The stylesheet file
vegas.min.css - And the
overlaysimage directory
To add these assets to WordPress, we’ll use the wp_enqueue_scripts function, wp_register_script and its CSS counterparts as shown in the following example. If you want a more detailed explanation, take a look at the post on adding assets in WordPress.
<?php
//** BEGIN HERE **/
function vegas_assets() {
wp_register_script( 'vegas', get_template_directory_uri() . '/js/vegas.min.js', array( 'jquery' ) );
wp_enqueue_script( 'vegas' );
wp_register_style( 'vegas', get_template_directory_uri() . '/css/vegas.min.css' );
wp_enqueue_style( 'vegas' );
}
add_action( 'wp_enqueue_scripts', 'vegas_assets' );
If you want to display the slider only on the home page, use the condition
is_home()oris_front_page()or any other condition according to the chosen page or page template.
Building the Slider
In our case, and the logical scenario of a full-screen slider, we want to add the html of the slider after the body tag. You can, of course, edit header.php and add the code directly there, but it’s more appropriate to add a hook in header.php that calls a function in functions.php.
To create a hook after the body tag, add the following code directly after the body tag in the header.php file of your child theme:
<?php do_action('after_body_open_tag'); ?>Now, let’s add a function containing the HTML of the element where we’ll activate Vegas. Inside it, you’ll find the individual slides and the content of each one.
Add the following code to the functions.php file:
<?php
//** BEGIN HERE **//
function custom_content_after_body_open_tag() { ?>
<div id="vegasSlideshowOne">
<div class="vegasWrapperOne">
<div class="vegasContentOne" data-index="0">
<div class="vegasTitle animated fadeInDown">Title 0</div>
<div class="vegasSubtitle animated fadeIn">Subtitle 0</div>
</div>
<div class="vegasContentOne" data-index="1">
<div class="vegasTitle animated fadeInDown">Title 1</div>
<div class="vegasSubtitle animated fadeIn">Subtitle 1</div>
</div>
<div class="vegasContentOne" data-index="2">
<div class="vegasTitle animated fadeInDown">Title 2</div>
<div class="vegasSubtitle animated fadeIn">Subtitle 2</div>
</div>
</div>
<div class="vegasArrows">
<div class="arrowLeft myArrow"><a href="#"></a></div>
<div class="arrowRight myArrow"><a href="#"></a></div>
</div>
</div>
<?php
}
add_action('after_body_open_tag', 'custom_content_after_body_open_tag');Building the Slider
In our case, and the logical scenario of a full-screen slider, we want to add the html of the slider after the body tag. You can, of course, edit header.php and add the code directly there, but it’s more appropriate to add a hook in header.php that calls a function in functions.php.
To create a hook after the body tag, add the following code directly after the body tag in the header.php file of your child theme:
<?php do_action('after_body_open_tag'); ?>Now, let’s add a function containing the HTML of the element where we’ll activate Vegas. Inside it, you’ll find the individual slides and the content of each one.
Add the following code to the functions.php file:
Slider Configuration
The element that will activate the slider is #vegasSlideshowOne. The content that will appear on each of the slides is in the class vegasWrapperOne, and the arrows to control the slider are in the class vegasArrows.
Notice that we added the data-index attribute with the slide number for each of the individual slides. We’ll use this attribute when handling clicks to affect the slider.
You’ll also see that we added the animated fadeInDown class to the content of the slides. We’ll use it later to make the content transition a bit more pleasing to the eye.
By default, Vegas Slider doesn’t provide a way to switch the slides by itself, and we need to use a bit of JavaScript to make that happen.
Styling the Slider
We won’t go into detail on the CSS, but note that we used Flexbox to easily center the content in the slider. Using Flexbox saves quite a few headaches in everything related to layout and one-dimensional alignment (while CSS Grid is designed for two dimensions).
We also styled the buttons for changing the slides and used
psuedo elementsto create triangles.
Now, let’s include the CSS as inline-css in the head of the theme since, from our perspective, the slider will always be in the critical top part of the page (if we’re talking about a standard full-screen slider).
For performance reasons, it’s even recommended to inline elements located in the critical part of the page. Here is the code (and it’s advisable to
<?php
/* BEGIN HERE */
function vegas_css_head() { ?>
<style>
#vegasSlideshowOne {
height: 100vh !important;
width: 100%;
}
.vegas-overlay {
opacity: .6;
}
.vegas-wrapper {
display: flex;
height: 100vh !important;
width: 100vw !important;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
font-size: 90px;
color: white;
line-height: 98px;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.vegasContentOne {
align-self: center;
display: none;
}
.vegasContentOne.active {
display: block;
}
.vegasTitle {
font-size: 38px;
line-height: 46px;
text-transform: uppercase;
font-weight: 900;
width: auto;
animation-duration: .8s;
text-shadow: 4px 3px 0px rgba(39, 40, 35, 0.5), 9px 8px 0px rgba(0,0,0,0.15);
}
.vegasSubtitle {
animation-duration: 0.7s;
animation-delay: 0.5s;
font-size: 18px;
line-height: 26px;
padding-top: 18px;
}
.vegasArrows {
width: 100%;
font-size: 24px;
line-height: 1;
display: none;
z-index: 999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.arrowLeft {
left: 30px;
position: absolute;
}
.arrowRight {
right: 30px;
position: absolute;
}
.arrowLeft a:before {
border-width: 8px 12px 8px 0;
border-color: transparent #fefefe transparent transparent;
left: -2px;
}
.arrowRight a:before {
border-width: 8px 0 8px 12px;
border-color: transparent transparent transparent #fefefe;
right: -2px;
}
.myArrow a:before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
opacity: .9;
position: relative;
}
.vegasArrows a {
color: white;
font-weight: 300;
background: rgba(47, 47, 47, 0.57);
width: 40px;
height: 40px;
display: inline-block;
line-height: 40px;
border-radius: 50%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
cursor: pointer;
}
.vegasArrows a:hover {
background: rgba(37, 37, 37, 0.97);
}
@media screen and (min-width: 768px) {
.vegasTitle {
font-size: 60px;
line-height: 80px;
}
.vegasSubtitle {
font-size: 24px;
line-height: 36px;
}
</style>
<?php
}
add_action( 'wp_head', 'vegas_css_head' );
Similarly, you can load a new CSS file for the slider in the usual way we’re familiar with, as we showed at the beginning of the article.
Activate the Vegas Slider using jQuery
You can add the following code in any JavaScript file loaded in your theme. It’s advisable to place it in a generic JS file loaded after jQuery or enqueue a new file and add this code.
Note that this code should run after jQuery and after the Vegas JavaScript file we loaded initially.
jQuery(function($){
/** Vegas Init **/
$("#vegasSlideshowOne").vegas({
timer: false,
delay: 8000,
animationDuration: 10000,
slides: [
{ src: "/wp-content/themes/YOUR_THEME/images/image1.jpg" },
{ src: "/wp-content/themes/YOUR_THEME/images/image2.jpg" },
{ src: "/wp-content/themes/YOUR_THEME/images/image3.jpg" }
],
animation: 'kenburns',
overlay: '/wp-content/themes/thesis/images/overlays/03.png',
walk: function (index, slideSettings) {
$('.vegasContentOne').removeClass('active');
$('.vegasContentOne[data-index="'+ index +'"]').toggleClass('active');
}
});
/** Controling the Arrows **/
$('.arrowLeft').on('click', function (e) {
e.preventDefault();
$("#vegasSlideshowOne").vegas('previous');
});
$('.arrowRight').on('click', function (e) {
e.preventDefault();
$("#vegasSlideshowOne").vegas('next');
});
});
According to the location of the images in the child theme, you will need to change the addresses for the images when calling Vegas.
We have already mentioned Vegas options before; what’s added is a method called walk on line 16. This method will determine what code to execute each time a slide is changed.
In our case, we want the content of the current slide to disappear, and the new content to appear each time Vegas switches a slide. We’ll achieve this by adding and removing a class named active to the vegasContentOne content container.
We identify the current container by the data-index attribute we added in HTML, using the plugin’s index parameter to target this data-index.
Hopefully, I’ve been clear, and there’s probably a smarter way to do this. In any case, in CSS, we’ve already set that the active class will be display: block, and without this class, the element will be display: none by default.
Lines 23-31 are responsible for swapping slides using the previous & next methods of the library.
You’re welcome to take a look at the Vegas Background Slideshow documentation for more information on Vegas options.
Use animate.css for animations
At this point, you should already see the slider properly on your site. But currently, the content is transitioning abruptly and not smoothly.
Remember we added the animated fadeInDown class to the content elements at the beginning of the guide? If you add animate.css, the slider’s content will transition with a nice animation.
Of course, you can change the fadeInDown class to any other class from animate.css to change the animation. You can also use animation-duration and animation-delay to play with the timing and duration of these elements’ animations.
Summary
It’s not always possible or necessary, but when you can, build the slider yourself, allowing the client to easily input content through Advanced Custom Fields, and they’ll be satisfied, I promise.
If you liked the post, you might also want to check out the guide on creating a carousel with Slick and Advanced Custom Fields. Share and like if you enjoyed 🙂 If you have any comments, feel free to share your thoughts…
