Responsive Vertical Card Slider using HTML & CSS.

Responsive Vertical Card Slider using HTML & CSS
Hello developers, today in this blog you'll learn how to create a Responsive Vertical Card Slider using HTML & CSS.

The Slider is also called a Carousel or Slideshow. The Slider may be the convenient way to display the changing or sliding cards one by one on the website. Since it is a vertical card slider, the cards will slide vertically.

In this blog (Responsive Vertical Card Slider) on the webpage, there are five cards, but only three cards will appear, and only the center has full opacity. The other two cards are a little bit fade out and you can see them in the preview. When these cards are sliding and you hover on them then the cards of the animation will be paused which means it stops sliding. The card may contain some details like the profile icon of the person, name, user profession, and a follow button.

The source code of this Responsive Vertical Card Slider is given below, and you can copy the source code of this program. You can use this code of Responsive Vertical Card Slider with your creativity and can take this card to the subsequent level.

Responsive Vertical Card Slider [Source Code]

To make this website (Responsive Vertical Card Slider), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vertical Card Slider || Learning Robo</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <div class="wrapper"> <div class="outer"> <div class="card" style="--delay:-1;"> <div class="content"> <div class="img"><img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__480.png" alt=""></div> <div class="details"> <span class="name">Jessi Rani</span> <p>Web Developer</p> </div> </div> <a href="#">Follow</a> </div> <div class="card" style="--delay:0;"> <div class="content"> <div class="img"><img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__480.png" alt=""></div> <div class="details"> <span class="name">Sam Singh</span> <p>Team Lead</p> </div> </div> <a href="#">Follow</a> </div> <div class="card" style="--delay:1;"> <div class="content"> <div class="img"><img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__480.png" alt=""></div> <div class="details"> <span class="name">Ram Vishal</span> <p>Project Manager</p> </div> </div> <a href="#">Follow</a> </div> <div class="card" style="--delay:2;"> <div class="content"> <div class="img"><img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__480.png" alt=""></div> <div class="details"> <span class="name">Mukil Kapoor</span> <p>App Developer</p> </div> </div> <a href="#">Follow</a> </div> <div class="card" style="--delay:2;"> <div class="content"> <div class="img"><img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__480.png" alt=""></div> <div class="details"> <span class="name">Prasath Kumar</span> <p>Software Engineer</p> </div> </div> <a href="#">Follow</a> </div> </div> </div> </section> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page. To make the page attractive and responsive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
   width: 100%;
   height: 100vh;
   background: linear-gradient(to right, #0ED2F7, #B2FEFA); 
}
section{
  width: 100%;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .outer{
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .card{
  background: #fff;
  width: 430px;
  display: flex;
  align-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  justify-content: space-between;
  border-radius: 100px 20px 20px 100px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: animate 15s linear infinite;
  animation-delay: calc(3s * var(--delay));
}
.outer:hover .card{
  animation-play-state: paused;
}
.wrapper .card:last-child{
  animation-delay: calc(-3s * var(--delay));
}
@keyframes animate {
  0%{
    opacity: 0;
    transform: translateY(100%) scale(0.5);
  }
  5%, 20%{
    opacity: 0.4;
    transform: translateY(100%) scale(0.7);
  }
  25%, 40%{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0%) scale(1);
  }
  45%, 60%{
    opacity: 0.4;
    transform: translateY(-100%) scale(0.7);
  }
  65%, 100%{
    opacity: 0;
    transform: translateY(-100%) scale(0.5);
  }
}
.card .content{
  display: flex;
  align-items: center;
}
.wrapper .card .img{
  height: 90px;
  width: 90px;
  position: absolute;
  left: -5px;
  background: #fff;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
  background: #12192c;
}
.card .img img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.card .details{
  margin-left: 80px;
}
.details span{
  font-weight: 600;
  font-size: 18px;
}
.card a{
  text-decoration: none;
  padding: 7px 18px;
  border-radius: 25px;
  color: #fff;
  background: #12192c;
  transition: all 0.3s ease;
}
.card a:hover{
  transform: scale(0.94);
}
.credit a{
    text-decoration: none;
    color: #000;
    font-weight: 900;
  }

  .credit {
      margin-top: 20px;
      text-align: center;
  }
We hope you would like this Responsive Vertical Card Slider using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Responsive Vertical Card Slider using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome