Hey, everyone hope you are all fine let’s create a Responsive Card Slider in HTML CSS and JavaScript step by step. In today’s digital world, it’s important to create websites that are not only visually appealing but also interactive and engaging for users. One popular element that can achieve this is a card slider.
A card slider allows you to showcase multiple items or content in a compact and elegant way, making it an excellent choice for displaying portfolios, product listings, testimonials, and more. A card slider is a user interface component that presents a series of cards in a sliding manner.
Each card contains information or media that you want to share with your website visitors. By implementing a responsive card slider, you ensure that it adapts and works well on different devices and screen sizes.
To create a responsive card slider, you’ll need to use HTML, CSS, and JavaScript. HTML provides the structure and content of the slider, CSS is used to style and design it, and JavaScript adds interactivity and functionality.
Responsive Card Slider in HTML CSS and JavaScript
The first step in creating a card slider is to set up the HTML structure. You’ll need a container element to hold the slider, and inside it, a wrapper element that will contain the individual cards. The cards will be displayed horizontally, allowing users to slide through them.
After styling the slider, you’ll need to create the card items themselves. Each card will represent a piece of content or information that you want to display. You can include images, text, titles, descriptions, or any other relevant content within each card.
<div class="container swiper mySwiper">
<!-- card content -->
<div class="card_content swiper-wrapper">
<div class="card swiper-slide">
<img src="./imgs/team-1.jpg" alt="" />
<div class="title">
<h2>Walter White</h2>
</div>
<div class="content">
<p>Chief Executive Officer</p>
<div class="social_icons">
<i class="bx bxl-facebook-circle"></i>
<i class="bx bxl-twitter"></i>
<i class="bx bxl-linkedin"></i>
<i class="bx bxl-instagram-alt"></i>
</div>
</div>
</div>
<div class="card swiper-slide">
<img src="./imgs/team-2.jpg" alt="" />
<div class="title">
<h2>Sarah Jhonson</h2>
</div>
<div class="content">
<p>Product Manager</p>
<div class="social_icons">
<i class="bx bxl-facebook-circle"></i>
<i class="bx bxl-twitter"></i>
<i class="bx bxl-linkedin"></i>
<i class="bx bxl-instagram-alt"></i>
</div>
</div>
</div>
<div class="card swiper-slide">
<img src="./imgs/team-3.jpg" alt="" />
<div class="title">
<h2>William Anderson</h2>
</div>
<div class="content">
<p>CTO</p>
<div class="social_icons">
<i class="bx bxl-facebook-circle"></i>
<i class="bx bxl-twitter"></i>
<i class="bx bxl-linkedin"></i>
<i class="bx bxl-instagram-alt"></i>
</div>
</div>
</div>
<div class="card swiper-slide">
<img src="./imgs/team-4.jpg" alt="" />
<div class="title">
<h2>Amanda Jepson</h2>
</div>
<div class="content">
<p>Accountant</p>
<div class="social_icons">
<i class="bx bxl-facebook-circle"></i>
<i class="bx bxl-twitter"></i>
<i class="bx bxl-linkedin"></i>
<i class="bx bxl-instagram-alt"></i>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>Next, you’ll need to style the card slider using CSS. You can set the width and height of the container and wrapper elements to determine their size on the webpage. You can also customize the background, border, spacing, and other visual aspects to match your desired design.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
*{
margin: 0;
box-sizing: border-box;
padding: 0;
font-family: "Poppins",sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #34495E;
}
.container{
max-width: 1440px;
margin: 0 auto;
/* padding: 4rem 0px; */
background: #5D6D7E;
padding-bottom: 4rem;
}
.container img{
display: block;
width: 80%;
border-radius: 10px 10px 0px 0px;
object-fit: cover;
}
.container .card_content{
display: flex;
padding: 6rem 2.5rem;
}
.card{
width: 100%;
position: relative;
}
.card .title{
position: absolute;
bottom: 0;
left: 0;
background: rgba(255,255,255,0.7);
width: 80%;
text-align: center;
padding: 0.4rem 0;
}
.content{
background: #fff;
text-align: center;
position: absolute;
padding: 1rem 0;
width: 80%;
}
.social_icons{
display: flex;
justify-content: space-between;
width: 100%;
padding: 0.5rem 2rem;
align-items: center;
font-size: 1.5rem;
}
.social_icons i{
color: #34495E;
cursor: pointer;
}
To make the card slider interactive, JavaScript comes into play. You’ll use JavaScript to add functionality to the slider. This includes implementing navigation buttons to slide through the cards. When a user clicks on the previous or next button, the cards will move accordingly, allowing for smooth sliding motion.
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
spaceBetween: 25,
slidesPerGroup: 1,
loop: true,
fade: true,
centerSlide: true,
grabCursor: true,
loopFillGroupWithBlank: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
dynamicBullets: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
968: {
slidesPerView: 3,
},
},
});To ensure that the card slider works well on different devices and screen sizes, you’ll need to make it responsive. This means using CSS media queries to adjust the layout, size, and number of visible cards based on the screen width.
You May Also Like:
- Sticky Navbar Using HTML CSS And JavaScript
- Create an Accordion Using HTML, CSS, and JavaScript
- How to Create a Coming Soon Website in HTML CSS and JavaScript
- How to Make a Password Generator in JavaScript
- How to Make a Digital Clock Using JavaScript
This way, the slider will look good and function properly on various devices, such as desktop computers, tablets, and mobile phones.
As an additional feature, you can also implement auto-play functionality, which automatically slides through the cards at a specified interval. This can enhance the user experience by providing a hands-free way to view the content.
It’s important to test your responsive card slider on different browsers and devices to ensure that it works as intended. This will help you identify and fix any issues or inconsistencies that may arise.
In conclusion, a responsive card slider is a useful and visually appealing component for displaying content or products on a website. By following the steps outlined above and using HTML, CSS, and JavaScript, you can create an interactive and responsive card slider that enhances the user experience and engages your website, visitors.
Hi