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.
<img
src="https://mdbootstrap.com/img/new/textures/full/243.jpg"
class="block h-screen w-full object-cover object-left"
alt="15 years of experience in the IT industry" />
Let's add these classes to each of the images in the carousel:
<!--Carousel items-->
<div
class="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
<!--First item-->
<div
class="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
data-twe-carousel-active
data-twe-carousel-item
style="backface-visibility: hidden">
<!-- Image -->
<img
src="https://mdbootstrap.com/img/new/textures/full/243.jpg"
class="block h-screen w-full object-cover object-left"
alt="15 years of experience in the IT industry" />
<div
class="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block">
<h5 class="mb-3 text-xl">
15 years of experience in the IT industry
</h5>
<p class="mb-3">
I am in love with technology and have spent half my life developing
it
</p>
</div>
</div>
<!--Second item-->
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="backface-visibility: hidden">
<!-- Image -->
<img
src="https://mdbootstrap.com/img/new/textures/full/102.jpg"
class="block h-screen w-full object-cover object-left"
alt="243 completed projects" />
<div
class="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block">
<h5 class="mb-3 text-xl">243 completed projects</h5>
<p class="mb-3">I love challenges and treat each project as my own</p>
</div>
</div>
<!--Third item-->
<div
class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
data-twe-carousel-item
style="backface-visibility: hidden">
<!-- Image -->
<img
src="https://mdbootstrap.com/img/new/textures/full/107.jpg"
class="block h-screen w-full object-cover object-left"
alt="53 satisfied customers" />
<div
class="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block">
<h5 class="mb-3 text-xl">53 satisfied customers</h5>
<p class="mb-3">
There is no better reward for me than a happy customer
</p>
</div>
</div>
</div>
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:
<!--Carousel items-->
<div
class="relative w-full overflow-hidden shadow-2xl after:clear-both after:block after:content-['']">
[...]
</div>
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:
<!--Carousel items-->
<div
class="relative w-full overflow-hidden rounded-bl-[4rem] shadow-2xl after:clear-both after:block after:content-['']">
[...]
</div>
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
<button
type="button"
data-twe-target="#carouselExampleCaptions"
data-twe-slide-to="1"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 2"></button>
Let's change the .h-[3px] and .w-[30px] classes in
each of these 3 buttons to .h-2 and .w-2.
<button
type="button"
data-twe-target="#carouselExampleCaptions"
data-twe-slide-to="0"
data-twe-carousel-active
class="mx-[3px] box-content h-2 w-2 flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-current="true"
aria-label="Slide 1"></button>
This will turn dashes into dots.
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.