Responsive Card Slider Using HTML ,CSS & JavaScript
Hey, Friends Today We Will See How To Make This Cool Responsive Card Slider Using Html, Css, And Javascript(Jquery).
A horizontally aligned set of cards called a “card slider” can be slid to reveal other cards that are hidden. Any content is permissible on the card. such as blog cards, e-commerce product cards, profile cards, and so forth.
These five cards generally scroll independently from left to right. Additionally responsive, these display well on all screen sizes. Additionally, a slider button is provided below to skip the pattern and manually view the other cards.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
| Code by | codingporium |
| Project Download | Link Available Below |
| Language used | HTML, CSS, and JavaScript |
| External link / Dependencies | YES |
| Responsive | YES |
Let’s See The Codes For This Responsive Carousel Card Slider Project.
50+ HTML, CSS & JavaScript Projects With Source Code
HTML CODE FOR CARD SLIDER
PASTE THESE CODES:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Responsive Owl-Carousel Slider</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"> </head> <body> <div class="wrapper"> <div class="carousel owl-carousel"> <div class="card card-1"> A </div> <div class="card card-2"> B </div> <div class="card card-3"> C </div> <div class="card card-4"> D </div> <div class="card card-5"> E </div> </div> </div> </body> </html>
First, we’ll add a few key links to our header section of our HTML code, which will let us to add the stylistic and javascript concerns that we’ll be employing through external files. We shall therefore include the URL in our head section.
Create A Travel/Tourism Website Using HTML and CSS
The structure for our card slider will now be added to the body. Starting with the div> element, we’ll create a crousel section. Then, we will divide our crousel portion into three sub-sections that will serve as various holding areas for various cards. With the class “card -1,..” we will now construct four distinct divs. We will add card styling to our app using CSS using these classes.
Output:
Now We Use Css To Style Responsive Card Slider Using Html And Css:
Portfolio Website using HTML and CSS (Source Code)
CSS CODE FOR Card Slider
PASTE THESE CODES:
In your stylesheet, copy and paste the CSS code provided below. To add styling to our timeline page we will use the class selector.
<style media="screen">
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
}
.wrapper{
width: 100%;
}
.carousel{
max-width: 1200px;
margin: auto;
padding: 0 30px;
}
.carousel .card{
color: #fff;
text-align: center;
margin: 20px 0;
line-height: 250px;
font-size: 90px;
font-weight: 600;
border-radius: 10px;
box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
}
.carousel .card-1{
background: #ed1c24;
}
.carousel .card-2{
background: #0072bc;
}
.carousel .card-3{
background: #39b54a;
}
.carousel .card-4{
background: #f26522;
}
.carousel .card-5{
background: #630460;
}
.owl-dots{
text-align: center;
margin-top: 40px;
}
.owl-dot{
height: 15px;
width: 45px;
margin: 0 5px;
outline: none;
border-radius: 14px;
border: 2px solid #0072bc!important;
box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.owl-dot.active,
.owl-dot:hover{
background: #0072bc!important;
}
</style>10+ HTML CSS Projects For Beginners (Source Code)
Step1:Before updating the system default fonts, let’s first import a few fresh Google Fonts fonts via the import link. Next, we will use the font-family property to alter the display to “flex” and the font family to “poppins.”
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
}Step2:We will now style the card’s wrapper using the class selector (.wrapper). We’ll use the max-width attribute to set the maximum width to 1200px and set the width to “100%”. Our card has padding added and the margin set to “auto.”
.wrapper {
width: 100%;
}
.carousel {
max-width: 1200px;
margin: auto;
padding: 0 30px;
}
.carousel .card {
color: #fff;
text-align: center;
margin: 20px 0;
line-height: 250px;
font-size: 90px;
font-weight: 600;
border-radius: 10px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}Step3:Using the class selector, we will now select our cards (.card-1,.card-2). Using the background attribute, we will give various cards different backdrop colors. After setting the width and height of our card to 15 px and 45 px, respectively, we will use the border property to add a 2 px border to it.
Facebook Clone using HTML & CSS
.carousel .card-1 {
background: #ed1c24;
}
.carousel .card-2 {
background: #0072bc;
}
.carousel .card-3 {
background: #39b54a;
}
.carousel .card-4 {
background: #f26522;
}
.carousel .card-5 {
background: #630460;
}
.owl-dots {
text-align: center;
margin-top: 40px;
}
.owl-dot {
height: 15px;
width: 45px;
margin: 0 5px;
outline: none;
border-radius: 14px;
border: 2px solid #0072bc!important;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.owl-dot.active,
.owl-dot:hover {
background: #0072bc!important;
}Output:
Now We Use Javascript For Functionality In Our Card Slider
ADVERTISEMENT
JAVASCRIPT CODE FOR Card Slider
PASTE THESE CODES:
ADVERTISEMENT
<script>
$(".carousel").owlCarousel({
margin: 20,
loop: true,
autoplay: true,
autoplayTimeout: 2000,
autoplayHoverPause: true,
responsive: {
0:{
items:1,
nav: false
},
600:{
items:2,
nav: false
},
1000:{
items:3,
nav: false
}
}
});
</script>The jQuery framework will be used inside of our javascript. First, we’ll use the ($(“carousel”)) function to choose our cards. Then, we’ll add a margin of 200 pixels and use the autoplay property to turn it to true so that the card slider automatically starts moving. Finally, we’ll add a timer brake of 2000 milliseconds when the autoplay is complete.
ADVERTISEMENT
Quiz App With Timer using HTML, CSS & JavaScript
ADVERTISEMENT
Final Output:
Codepen Preview:
ADVERTISEMENT
5+ HTML CSS project With Source Code
And that’s all for this Responsive Card Slider Html, Css & Javascript project! Thanks for reading!
Written by @codingporium
Which code editor do you use for this Responsive Card Slider project coding?
I personally recommend using VS Code Studio, it’s very simple and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
Yes!
