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.
@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;
}
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.
Post a Comment
Thank you
Learning robo team