Half carousel

In this lesson, we'll use the component we saw in the previous tutorial, the carousel. We will modify it a bit to fit our Split screen.

Step 1 - add carousel

Copy the basic example from the carousel documentation and insert it into the second column of the grid in our Split screen.

Carousel will appear on the screen, but as you remember from the previous tutorial, we need to initialize it to make it work properly.

So let's initialize the carousel component in our project. Go back to the carousel documentation, click "JavaScript" tab and copy JavaScript code

Then go to src/js/index.js file in your project and replace the code you will find there with the one you just copied.

After saving the file you should see a working carousel. After clicking on the arrows, the slides should change, which means that both the Tailwind Elements styles and the necessary JavaScript work correctly.


Step 2 - change the images, captions and alt descriptions

Change carousel images, alt descriptions and captions, customizing the entire carousel the way you want.

Note: If you are looking for beautiful, free photos, I recommend one of the following websites. They have very friendly licenses that allow you to use their resources for free in both non-commercial and commercial projects. Importantly, they do not require attribution (i.e. marking who is the author and where the photos come from).

This is how the code of my carousel looks like in the end:

And this is how it looks in the browser:

As you can see, we have a few problems here: the images are not even and do not fill the entire available height of the screen. Let's fix it.

Step 3 - set the height of the images

Again we will use .h-screen class to set the height of the image to the full available space on the screen. We need to add this class to each of the images in the carousel.

So let's add .h-screen to every image inside of the Carousel items section:

Now the images actually fill the available height, but unfortunately this distorts them. We'll fix that in the next lesson.

John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.