Creating a Slider with Tailwind CSS

Creating a Slider with Tailwind CSS

Written by Tony Lea on Sep 4th, 2020 ・ Views ・ Report Post

Tony Lea Visit User Profile

Creating a slider with Tailwind and a little bit of javascript is actually very simple and that's what we'll be cover in this tutorial.

First, we'll create the HTML and CSS for our slider, and then we will add the slider functionality with a little bit of javascript.

Here is a quick example of what we'll create.

Stylizing the slides

In this example, we'll create a full-screen slider so our HTML for our first slide will look something like this:

<div class="relative">
    <div class="absolute inset-0 w-screen h-screen bg-pink-500 text-white flex items-center justify-center text-5xl">Hello</div>
</div>

You can see how this will look in the codepen below.

As you can see it's just a simple full-screen page with centered text. Next, we're going to add some transform and translate classes to our slide element.

transition-all ease-in-out duration-1000 transform translate-x-0

If we were to swap the translate-x-0 class with -translate-x-full, our full-screen slide will move to the left and out of the screen. So, if we added translate-x-full to another slide it will be out of the screen and to the right. And that will be our second slide.

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

Here is the full HTML for our slider so far:

<div class="relative">
    <div class="absolute inset-0 w-screen h-screen bg-pink-500 text-white flex items-center justify-center text-5xl transition-all ease-in-out duration-1000 transform translate-x-0 slide">Hello</div>
    <div class="absolute inset-0 w-screen h-screen bg-purple-500 text-white flex items-center justify-center text-5xl transition-all ease-in-out duration-1000 transform translate-x-full slide">There</div>
</div>

But, this won't function without changing those translate classes, so let's do that with a little bit of javascript. (FYI, notice in the code above we added a class of .slide to each of our slides)

setTimeout(function(){
    let activeSlide = document.querySelector('.slide.translate-x-0');
    activeSlide.classList.remove('translate-x-0');
    activeSlide.classList.add('-translate-x-full');
    
    let nextSlide = activeSlide.nextElementSibling;
    nextSlide.classList.remove('translate-x-full');
    nextSlide.classList.add('translate-x-0');
}, 3000);

From our javascript, we are waiting 3 seconds, moving the active slide to the left, and then moving the next slide on to the screen.

Take a look at the codepen example below:

If you don't see the slide functionality above you may need to rerun the codepen.

Ok, now that we have our slider moving, how about we include a few buttons to trigger that move and add a few more slides.

Adding slide functionality

Next, we'll probably want to include a few buttons inside of our slider. Simple enough, here are the buttons we will add inside our container.

<div class="relative">
    <div class="absolute inset-0 w-screen h-screen bg-pink-500 text-white flex items-center justify-center text-5xl transition-all ease-in-out duration-1000 transform translate-x-0 slide">Hello</div>
    <div class="absolute inset-0 w-screen h-screen bg-purple-500 text-white flex items-center justify-center text-5xl transition-all ease-in-out duration-1000 transform translate-x-full slide">There</div>
    <div class="absolute inset-0 w-screen h-screen bg-teal-500 text-white flex items-center justify-center text-5xl transition-all ease-in-out duration-1000 transform translate-x-full slide">Booya!</div>
    <div class="fixed bottom-0 right-0 bg-white w-16 h-16 flex items-center justify-center text-black">&#x276F;</div>
    <div class="fixed bottom-0 right-0 bg-white w-16 h-16 mr-16 border-r border-gray-400 flex items-center justify-center text-black">&#x276E;</div>
</div>

You can see how those buttons will look below:

The buttons aren't functioning yet, so let's add that functionality in with the following code.

function nextSlide(){
    let activeSlide = document.querySelector('.slide.translate-x-0');
    activeSlide.classList.remove('translate-x-0');
    activeSlide.classList.add('-translate-x-full');
    
    let nextSlide = activeSlide.nextElementSibling;
    nextSlide.classList.remove('translate-x-full');
    nextSlide.classList.add('translate-x-0');
}

function previousSlide(){
    let activeSlide = document.querySelector('.slide.translate-x-0');
    activeSlide.classList.remove('translate-x-0');
    activeSlide.classList.add('translate-x-full');
    
    let previousSlide = activeSlide.previousElementSibling;
    previousSlide.classList.remove('-translate-x-full');
    previousSlide.classList.add('translate-x-0');
}

If we add onclick="nextSlide()" to our next button and onclick="previousSlide()" to our previous button you will that our slider works by click on the left and right buttons.

Additional functionality

This was a very basic example of creating a slider using TailwindCSS. You may want to add some additional functionality to make your slider complete. Here are just a few as an example.

  • When the user clicks the right arrow and there are no more nextSlides, you may want to bring them back to the first one.
  • When the user clicks left on the first slide you may want to return to the last slide.

Each slider functionality may be different based on your use case, but at least this will help you get up and running with your custom TailwindCSS slider.

Comments (3)