Bootstrap 5 Animated Cards Slider

by
Bootstrap 5 Animated Cards Slider
Code Snippet:images card slide bootstrap 5
Author: Arkenz
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 3,358
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (5 KB)

This Bootstrap 5 code snippet helps you to create animated cards slider. It employs animations to smoothly transition between cards, providing an engaging visual experience. This slider is helpful for showcasing content or images in a dynamic and eye-catching manner.

It comes with a responsive and interactive card slider with smooth transition animations between cards. Each card can contain images, text, and links, making it an excellent choice for creating an engaging content slider or image gallery.

How to Create Bootstrap 5 Animated Cards Slider

1. Start by adding the necessary HTML structure to your webpage. Include the Bootstrap CSS and JavaScript files by adding the following code to the <head> section of your HTML document:

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js'></script>

2. Next, create the container and card structure for your slider. The following code includes a sample structure for three cards. You can customize this structure to your liking. Ensure each card has the classes bg, bg1, bg2, and so on, as these are used to target them in the CSS animations.

Within each card (bg, bg1, bg2, etc.), you can customize the content to display your desired text, images, and links. Modify the <h3> and <p> elements to represent your content. For images, replace the background-image property with the URL of your image.

Each card is associated with a navigation link that allows users to switch between cards. To create these links, find the <a> elements within each card and modify the href attribute to match the id of the card you want to link to. For example, <a class="text-light" href="#bg1"> links to the first card with the id="bg1".

<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>

3. Style the card slider using the following CSS styles. Replace the background-image with your own image URL. You can customize these animations or add additional styles to match your website’s design.

.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);
  }
}

That’s it! You’ve now successfully implemented the “Bootstrap 5 Animated Cards Slider” on your website. Users can navigate through the cards using the provided links. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X