Improving the carousel

Our carousel is already working, but it doesn't look perfect. So let's improve a few important details to make it look its best.

Step 1 - fix the image

Images in the carousel are distorted. So let's use the Object fit and Object position properties to fix this.

As you remember from the previous lessons, to do it in Tailwind CSS we need to add for example .object-cover and object-left to the image.

Let's add these classes to each of the images in the carousel:

And now the images are perfectly adapted to the carousel, and according to our assumptions, they fill 100% of the screen height.

Step 2 - add shadow and rounded corner

It's time to take care of a few important details. Let's start with the shadows.

To apply shadows to the carousel, we need to add the appropriate class to the Carousel items wrapper. So let's add a heavy shadow class .shadow-2xl there:

Then, using arbitrary values, let's add a a big, 4rem rounding only to the bottom left corner of our carousel. Again, we need to add this to the Carousel items wrapper:

Step 3 - modify the indicators

By default, the indicators in the carousel are dashes. However, I think the design of our portfolio will be much better suited to dots. Let's change it.

Note: Taking care of consistency in the project, even in the case of details such as indicators in the carousel, shows your diligence and it is definitely worth doing.

Inside the Carousel indicators wrapper, we have 3 buttons, which serve as indicators. Each of these buttons is set in height and width using the .h-[3px] and .w-[30px] classes

Let's change the .h-[3px] and .w-[30px] classes in each of these 3 buttons to .h-2 and .w-2.

This will turn dashes into dots.

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.