Convert WordPress default Gallery into a simple Carousel without a plugin

I had the fun task to turn the default WordPress gallery into a carousel. Our users didn’t really like the grid of images, that WordPress ships with. Instead, our designers came up with something like below:
It’s basically a carousel, with the caption in a grey area in the side, along with control buttons in the bottom. When clicked, the next image is shown.
At first, I thought of using a plugin, which would’ve been fine. Except this would’ve added some level of training on how to use carousel plugins. Most of which are quite complicated to use. Besides, our users are already familiar with using the default WordPress gallery option. They just want to change the way it looks!
So the solution was to use a little bit of JavaScript and CSS. Note that this requires jQuery, Bootstrap for the grid, as well as Handlebars for templating.
Let’s begin:
First, let’s add a gallery to our page.
Insert a Gallery
Make sure that each image has a caption to go with it:
Caption included
This will ouput the default gallery in WordPress. Now note that each gallery will have a “.gallery” class in them. So let’s grab all of them, and create an object with it.

Now we have a “galleries” object, with the gallery id as the indexing property. This will support multiple galleries in a page, hence the index.

Inside each gallery object contains properties for the source and caption (separated by a “::”).

So we’ll have something like below:

gallery object

With our object in place, we can create our carousel.

Let’s create the HTML. The below code is simply HTML but using Handlebars syntax.

As you can see above, we are wrapping everything in it’s own “carousel-wrap”, with an attribute of “data-gallery”, along with the gallery index as the value.

We loop through each image and assign the values to the HTML.

We are using Boostrap col classes, and using a “background” for the image (not img tag). This makes our image behave properly in different viewports.

Note that we have “Previous” and “Next” buttons – which we’re adding for now – and will explain later.

Also, we’re creating the controls in the bottom, which we’ll bind to in the section below:

 

Back in our JavaScript, let’s register a helper called “hiddenOrNot” – which simply decides if it’s not the first image – hide everything:

Now let’s compile our object and output to our template.

Remember our delimiter “::”, that’s what we’re doing in line 8 below. Also, we’re binding events to each of the controls along with assigning hidden and active classes to both itself and the large images.

Finally, we remove the default WordPress gallery by using jQuery’s .remove().

Remember our Previous and Next buttons,  this is only to show up in viewports for mobile devices. That is made possible by using the “visible-xs” Bootstrap class. So it looks like below in small devices:

Carousel view

Now let’s add some events to those buttons:

For each button, we’re doing some logic – each of them are in functions that we can reuse.

Finally, let’s add some CSS styles:

This is for the carousel itself:

Now you might have noticed a little triangle in our caption. This is the CSS that made that possible:

Finally, below is the finished result. In desktop and mobile view. A live example can be found here (scroll down to the middle of the page).

Final output

And that’s about it! We’ve just created a carousel without a plugin. This may be a simplistic carousel – one that can be enhanced even further. Maybe add some animations, previews, swipe events etc.

Hope you try it out in your projects. Leave your comments below.

Leave a Comment.