Here’s a comprehensive guide to building a visually appealing and interactive Bootstrap 5 Animated Cards Slider. This tutorial will walk you through the process step-by-step, ensuring you can easily implement this engaging feature on your website.
Adding Header Assets
To begin, you’ll need to include the necessary CSS stylesheet for Bootstrap 5. This can be easily done by adding the following into the tag of your HTML document:
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
Creating the HTML Structure
The foundation of our slider is the HTML structure. We’ll use nested `div` elements to create the layered card effect and navigation.
<div class="container conbg" id="conbg">
<div class="bg2" id="bg2">
<div class="bg1" id="bg1">
<div class="bg" id="bg">
<div class="bg-text text-light ps-3">
<h3>Selamat datang di<br />PutihNET Official</h3>
<p>
Desain Login Page Hotspot<br />
Desain Voucher Wifi<br />
Bisnis Voucher
</p>
<a class="text-light" href="#bg1"><svg viewBox="0 0 448 512" width="30" fill="#fff" title="angle-double-right">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z" />
</svg></a>
</div>
</div>
<div class="bg-text text-light ps-3">
<h3>Selamat datang di<br />PutihNET Official</h3>
<p>
Desain Login Page Hotspot<br />
Desain Voucher Wifi<br />
Bisnis Voucher
</p>
<a class="text-light" href="#bg2"><svg viewBox="0 0 448 512" width="30" fill="#fff" title="angle-double-right">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z" />
</svg></a>
</div>
</div>
<div class="bg-text text-light ps-3">
<h3>Selamat datang di<br />PutihNET Official</h3>
<p>
Desain Login Page Hotspot<br />
Desain Voucher Wifi<br />
Bisnis Voucher
</p>
<a class="text-light" href="#conbg"><svg viewBox="0 0 448 512" width="30" fill="#fff" title="angle-double-right">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z" />
</svg></a>
</div>
</div>
</div>
Styling with CSS
Now, let’s enhance the look and feel of our animated cards using CSS. This will handle the positioning, appearance, and animations of the cards.
.conbg {
width: 100%;
height: 500px;
}
.bg2 {
z-index: 2;
position: relative;
width: 70%;
margin: 100px auto;
transform: rotate(10deg);
background-image: url(https://images.unsplash.com/photo-1623691183627-4d6075a8d0d7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzIyMzUwNDk&ixlib=rb-4.0.3&q=80);
background-size: cover;
background-position: right -50px;
background-color: lightslategray;
box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
}
.bg1 {
z-index: 3;
position: relative;
margin: auto;
transform: rotate(-5deg);
background-image: url(https://images.unsplash.com/photo-1575419268007-a9a5e6b1ce0b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzIyMzQ5NjY&ixlib=rb-4.0.3&q=80);
background-size: cover;
background-position: right -70px;
background-color: lightslategray;
box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
}
.bg {
z-index: 4;
position: relative;
margin: auto;
transform: rotate(-5deg);
height: 500px;
background-image: url(https://images.unsplash.com/photo-1630534658718-395efda906cb?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzIyMzUxMDA&ixlib=rb-4.0.3&q=80);
background-size: cover;
background-position: right -50px;
background-color: lightslategray;
box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
}
.bg-text {
width: 100%;
position: absolute;
display: inline-block;
bottom: 0;
left: 0;
}
.bg-text a {
margin: 5px;
float: right;
}
#bg1:target .bg {
-webkit-animation: ciut 1s forwards;
animation: ciut 1s forwards;
}
#bg1:target {
-webkit-animation: fre 0.3s forwards;
animation: fre 0.3s forwards;
}
#bg2:target .bg1 {
-webkit-animation: ciut 1s forwards;
animation: ciut 1s forwards;
}
#bg2:target {
-webkit-animation: fre1 0.3s forwards;
animation: fre1 0.3s forwards;
}
#conbg:target .bg2 {
-webkit-animation: ciut1 1s;
animation: ciut1 1s;
}
@-webkit-keyframes fre1 {
0% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes fre1 {
0% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
@-webkit-keyframes fre {
0% {
transform: rotate(-5deg);
}
100% {
transform: rotate(-10deg);
}
}
@keyframes fre {
0% {
transform: rotate(-5deg);
}
100% {
transform: rotate(-10deg);
}
}
@-webkit-keyframes ciut {
0% {
opacity: 1;
transform: rotate(-5deg) scale(1);
}
100% {
opacity: 0;
transform: rotate(360deg) scale(0);
}
}
@keyframes ciut {
0% {
opacity: 1;
transform: rotate(-5deg) scale(1);
}
100% {
opacity: 0;
transform: rotate(360deg) scale(0);
}
}
@-webkit-keyframes ciut1 {
0% {
opacity: 0;
transform: rotate(0deg) scale(0);
}
100% {
opacity: 1;
transform: rotate(370deg) scale(1);
}
}
@keyframes ciut1 {
0% {
opacity: 0;
transform: rotate(0deg) scale(0);
}
100% {
opacity: 1;
transform: rotate(370deg) scale(1);
}
}
Adding Footer Assets
If you have custom javascript you can add them here.
That concludes the tutorial on creating a Bootstrap 5 Animated Cards Slider. By following these steps, you should have a functional and visually appealing slider on your website.
