The needs

The most important thing you will need is a background image that contains your clickable elements as well. Don’t think of anything fancy, it is basically one big image. Like the one on the right. I did mine 1080 px wide, that should work for most sites. If you want to have a wider slider, then you can make it wider.

The trick

Actually there are more tricks to this. 🙂

We are going to use this background image as the background for all slides. (To speed up your work, create one slide to the fullest you can, then copy it as many times as you need. This way you need to set up the background and the rest of the details only once.)

Second trick is, we are going to use the control dots to make it interactive. You know, the little dots that appear at the bottom and show you how many slides there are.

We will need to use the same background image on all slides, because the control dots are rendered only once for the slider. So we cannot have different clickable areas on the different slides. But that’s quite normal.

Setting up

Let’s set up a row with one column and let’s put a slider module in it.

First and foremost, go to the Custom CSS tab and give it a custom CSS ID. (I used sw-slider.) We will need this to be able to refer to this one slider only.

As for the other General Settings:

• Arrows: Show arrows (later on I usually hide these)
• Show controls: yes
• Automatic Animation: no
• Parallax: no
• Remove Inner Shadow: as you wish
• Background image position: Top Center (this will depend on the layout of your slider)
• Background image size: Actual Size (so that it doesn’t resize with the browser)
• Disable on: Phone and Tablet

Advanced Design Settings:

For this specific case we need to add a top padding of 300px and a bottom padding of 50px.This again will depend on your specific execution. This moves the text down, so it doesn’t cover the posters.

Add your slides

Add your first slide and set it up. You will need to add the background image for sure. The rest of the settings is up to you.

For this test case I just added a heading, a body text and I left everything as it’s default setting.

Then copy this slide as many times as you need it. In this case it is a total of 7 slides.

Then edit the content of your slides as needed. Remember to leave the background image as it is.

Once this is done, you should have something like the picture on the right. You have all your slides and you can flip through them.

So you have your basic slider.

Time for some CSS magic

This is where it can get confusing. 🙂 I will try to be as detailed as possible.

First we move our control dots to the top center. Remember, this is how we set up our background image as well. So add the below to your theme’s style.css file. (And as of now all code that you see here will go there.)

#sw-slider .et-pb-controllers {
    top: 0;
    width: 100%;
    left: 50%;
    bottom: unset;
    background-color: rgba(255,255,255,0.5) !important;
}

Note: At the end we will remove the background color, now it’s only there so we see what we are doing. 🙂

Use the force…

Now we need to move the control dots into position, to cover the large images.

The first dot is easy. Since I didn’t set up any hot spot for the first slide, we only need to hide the first dot, using this code:

#sw-slider .et-pb-controllers a:nth-child(1) {
    display: none;
}

Notice the ‘nth-child(1)’ in the code? That is how we are going to refer to the specific dots.

For the second dot / hotspot add this as a start, then we take it from there:

#sw-slider .et-pb-controllers a:nth-child(2) {
    position: absolute;
    background-color: rgba(0, 255, 255, 0.5) !important;
    margin: 0;
    padding: 0;
    width: 10px;
    height: 10px;
    top: 0px;
    left: 0px;
}

You should end up with a blue dot somewhere near the middle. (See image on right.)

Inspect

Now right-click on that blue dot and choose Inspect Element (or Inspect Element with Firebug). This will bring up a panel with the code of your site. Go to the CSS values in the inspector panel and start adjusting top, left, width and height until the blue dot covers your first image. (When you have the value highlighted you can use the up / down arrow keys to adjust the value.)

This was easy, right? 🙂

Some thinking and consolidation

Now, before we do any more work, let’s stop and think a bit. As you know, a good programmer is a lazy programmer: he doesn’t want to do anything twice.

So let’s think how we can be lazy.

Our posters on the background image are the same size, right? And their top edge is aligned. And they should have the same color. So if it is all the same, then we don’t need to define this for every dot separately, we can define it once for every dot! Hurray!

Once we define it for all dots, then we can remove the definitions from the second dot. So this is how the full code will look like now:

/* Move the controllers to top center */
#sw-slider .et-pb-controllers {
    top: 0;
    width: 100%;
    left: 50%;
    bottom: unset;
    background-color: rgba(255,255,255,0.5) !important;
}

/* Define common values for hotspots */
#sw-slider .et-pb-controllers a {
    position: absolute;
    background-color: rgba(0, 255, 255, 0.5) !important;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 150px;
    top: 25px;
}

/* Hide first dot */
#sw-slider .et-pb-controllers a:nth-child(1) {
    display: none;
}

/* Adjust position of second dot */
#sw-slider .et-pb-controllers a:nth-child(2) {
    left: -425px;
}

Tinkering

If you made it this far, then the rest of it is a piece of cake. We only need to align the rest of the dots and we are done.

So let’s set up the base for the rest of the dots with this code:

#sw-slider .et-pb-controllers a:nth-child(3) {
    left: 0px;
}
#sw-slider .et-pb-controllers a:nth-child(4) {
    left: 0px;
}
#sw-slider .et-pb-controllers a:nth-child(5) {
    left: 0px;
}
#sw-slider .et-pb-controllers a:nth-child(6) {
    left: 0px;
}
#sw-slider .et-pb-controllers a:nth-child(7) {
    left: 0px;
}

This will give you something like you see on the image in the right. The 2nd dot / hotspot is in place, the rest are stacked on top of each other. Now let’s move those.

Right click on the blue area in the middle and select Inspect Element. In your panel with the CSS code you will see which dot / hotspot you are working with in the ‘a:nth-child(7)’ part. So for me that’s the seventh / last dot this time. Adjust the left value until it covers the last poster. Once you have that value, paste it in your style.css file in the appropriate place:

#sw-slider .et-pb-controllers a:nth-child(7) {
    left: 325px;
}

Do this with the rest of the hotspots.

When you are done with all, then you should have a blue box covering all posters. Like on the image.

Now we’re ready for the cleanup and the finishing touches.

Cleanup

Remember, in the beginning I said we are going to remove some stuff? That comes now. We remove the background color from the #sw-slider .et-pb-controllers section, so that will look like this:

#sw-slider .et-pb-controllers {
    top: 0;
    width: 100%;
    left: 50%;
    bottom: unset;
}

And one more, in the #sw-slider .et-pb-controllers a section. From here we don’t remove the background color, we rather change it to transparent like this:

#sw-slider .et-pb-controllers a {
    position: absolute;
    background-color: rgba(255, 255, 255, 0) !important;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 150px;
    top: 25px;
}

Beautification

This now all looks good and works good. We just don’t know which image is selected. For simplicity, let’s put a white frame around that.

#sw-slider .et-pb-active-control {
    border: 3px solid #ffffff;
}

Maybe you can also hide the arrows in your sidebar settings, to make it look less like a regular slider.

And we are done. 🙂

Closing thoughts

This should give you a basic idea on how you can make some cool interactive ‘sliders’ for your website. Of course it is always possible to make them look more funky and more beautiful, the possibilities are infinite: the hotspots don’t need to be all the same size; they don’t need to be all lined up; the inactive hotspots can be shaded; and so on.

In the beginning I noted this will not work on Tablet and Phone view. Depending on the layout of your background / slider it might work on Tablet mode. There is a very low chance for Phone view, plus it is such a small screen, that most of the time it wouldn’t even make sense to have an interactive slider. So what I would do is the following:

Create an interactive slider that works in Desktop view and hide it in Phone view.

Create a separate simpler (possibly non-interactive) slider that looks good in Phone view and hide it in the other views.

For Tablet view decide based on how the original looks on a tablet. Or you can create a Tablet view that looks well on Phone view as well.

This way you will have everything covered.

I hope this tutorial helps you get started on your interactive slider. In case you are stuck, feel free to reach out and I’ll try to help. If you need more help or you would like me to build it for you, get in touch, I’m happy to help out as well.

And if you liked this tutorial, please share with your connections. Maybe it’s useful for them too.

Cheers,
Andras