Creating a responsive card slider using HTML, CSS, and JavaScript is an excellent way to enhance the interactivity and visual appeal of your web projects. A card slider allows users to navigate through multiple cards containing content, making it useful for displaying products, testimonials, or any other type of content in a compact and engaging manner. In this tutorial, we’ll guide you through building a responsive card slider from scratch.
Card sliders are a popular UI component in modern web design, enabling users to browse through content efficiently. They provide an interactive way to present information, keeping users engaged. In this tutorial, we will create a responsive card slider using HTML for structure, CSS for styling, and JavaScript for functionality. This will ensure that the slider works smoothly across various devices and screen sizes.
WATCH TUTORIAL:
HTML Structure
First, we’ll create the basic HTML structure for our card slider. This includes a container for the slider and individual cards.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character encoding for the HTML document -->
<meta charset="UTF-8">
<!-- Responsive design viewport settings -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title of the HTML document -->
<title>Card Slider HTML and CSS | CodingNepal</title>
<!-- Linking SwiperJS CSS for slider functionality -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<!-- Linking external CSS file for custom styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Main container for the swiper slider -->
<div class="container swiper">
<!-- Wrapper for the slider content -->
<div class="slider-wrapper">
<!-- List of cards for the slider -->
<div class="card-list swiper-wrapper">
<!-- Each card item in the slider -->
<div class="card-item swiper-slide">
<!-- User image in the card -->
<img src="pot.jpg" alt="User Image" class="user-image">
<!-- User name in the card -->
<h2 class="user-name">James Wilson</h2>
<!-- User profession in the card -->
<p class="user-profession">Software Developer</p>
<!-- Button to message the user -->
<button class="message-button">Message</button>
</div>
<!-- Another card item in the slider -->
<div class="card-item swiper-slide">
<img src="pot.jpg" alt="User Image" class="user-image">
<h2 class="user-name">Sarah Johnson</h2>
<p class="user-profession">Graphic Designer</p>
<button class="message-button">Message</button>
</div>
<!-- Another card item in the slider -->
<div class="card-item swiper-slide">
<img src="pot.jpg" alt="User Image" class="user-image">
<h2 class="user-name">Michael Brown</h2>
<p class="user-profession">Project Manager</p>
<button class="message-button">Message</button>
</div>
<!-- Another card item in the slider -->
<div class="card-item swiper-slide">
<img src="pot.jpg" alt="User Image" class="user-image">
<h2 class="user-name">Emily Davis</h2>
<p class="user-profession">Marketing Specialist</p>
<button class="message-button">Message</button>
</div>
<!-- Another card item in the slider -->
<div class="card-item swiper-slide">
<img src="pot.jpg" alt="User Image" class="user-image">
<h2 class="user-name">Christopher Garcia</h2>
<p class="user-profession">Data Scientist</p>
<button class="message-button">Message</button>
</div>
<!-- Another card item in the slider -->
<div class="card-item swiper-slide">
<img src="pot.jpg" alt="User Image" class="user-image">
<h2 class="user-name">Richard Wilson</h2>
<p class="user-profession">Product Designer</p>
<button class="message-button">Message</button>
</div>
</div>
<!-- Pagination controls for the slider -->
<div class="swiper-pagination"></div>
<!-- Previous button for the slider -->
<div class="swiper-slide-button swiper-button-prev"></div>
<!-- Next button for the slider -->
<div class="swiper-slide-button swiper-button-next"></div>
</div>
</div>
<!-- Linking SwiperJS script for slider functionality -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Linking custom script for additional functionality -->
<script src="script.js"></script>
</body>
</html>
CSS Styling
Next, we’ll add CSS to style our card slider. This includes setting dimensions, adding background colors, and positioning elements.
```css
/* Apply to all elements: Remove default margin and padding, set box-sizing to border-box */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Apply to body: Flexbox layout, center align items, center justify content, minimum height 100vh, background image and color */
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: url("bg.jpg") #030728;
}
/* Apply to slider-wrapper class: Hidden overflow, maximum width, margin */
.slider-wrapper {
overflow: hidden;
max-width: 1200px;
margin: 0 70px 55px;
}
/* Apply to card-item class within card-list: Auto height, white text color, disable user select, padding, flexbox column layout, center align items and justify content, border radius, backdrop blur, semi-transparent white background, border */
.card-list .card-item {
height: auto;
color: #fff;
user-select: none;
padding: 35px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 10px;
backdrop-filter: blur(30px);
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.5);
}
/* Apply to user-image class within card-item: Set width, height, border radius, margin-bottom, border, padding */
.card-list .card-item .user-image {
width: 150px;
height: 150px;
border-radius: 50%;
margin-bottom: 40px;
border: 3px solid #fff;
padding: 4px;
}
/* Apply to user-profession class within card-item: Set font size, color, weight, margin */
.card-list .card-item .user-profession {
font-size: 1.15rem;
color: #e3e3e3;
font-weight: 500;
margin: 14px 0 40px;
}
/* Apply to message-button class within card-item: Set font size, padding, text color, border radius, font weight, cursor, background color, border, transition */
.card-list .card-item .message-button {
font-size: 1.25rem;
padding: 10px 35px;
color: #030728;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
background: #fff;
border: 1px solid transparent;
transition: 0.2s ease;
}
/* Apply hover effect to message-button class: Change background color, border color, text color */
.card-list .card-item .message-button:hover {
background: rgba(255, 255, 255, 0.1);
border: 1px solid #fff;
color: #fff;
}
/* Apply to swiper-pagination-bullet class within slider-wrapper: White background, set height, width, opacity */
.slider-wrapper .swiper-pagination-bullet {
background: #fff;
height: 13px;
width: 13px;
opacity: 0.5;
}
/* Apply to active swiper-pagination-bullet class within slider-wrapper: Set opacity */
.slider-wrapper .swiper-pagination-bullet-active {
opacity: 1;
}
/* Apply to swiper-slide-button class within slider-wrapper: White text color, negative margin-top, transition */
.slider-wrapper .swiper-slide-button {
color: #fff;
margin-top: -55px;
transition: 0.2s ease;
}
/* Apply hover effect to swiper-slide-button class: Change text color */
.slider-wrapper .swiper-slide-button:hover {
color: #4658ff;
}
/* Responsive design for screens with max width of 768px */
@media (max-width: 768px) {
/* Apply to slider-wrapper: Adjust margin */
.slider-wrapper {
margin: 0 10px 40px;
}
/* Hide swiper-slide-button class within slider-wrapper */
.slider-wrapper .swiper-slide-button {
display: none;
}
}
```JavaScript Functionality
To make our slider functional, we’ll use JavaScript to handle the sliding effect when the buttons are clicked.
```javascript
// Initialize a new Swiper instance for the element with class 'slider-wrapper'
const swiper = new Swiper('.slider-wrapper', {
// Enable continuous loop mode
loop: true,
// Change cursor to grab cursor when hovering over the swiper
grabCursor: true,
// Set space between slides to 30 pixels
spaceBetween: 30,
// Configuration for pagination bullets
pagination: {
// Target the pagination container with class 'swiper-pagination'
el: '.swiper-pagination',
// Make pagination bullets clickable
clickable: true,
// Enable dynamic bullets for pagination
dynamicBullets: true
},
// Configuration for navigation buttons
navigation: {
// Target the next button with class 'swiper-button-next'
nextEl: '.swiper-button-next',
// Target the previous button with class 'swiper-button-prev'
prevEl: '.swiper-button-prev',
},
// Responsive breakpoints for different screen sizes
breakpoints: {
// For screens 0px and larger, display 1 slide per view
0: {
slidesPerView: 1
},
// For screens 768px and larger, display 2 slides per view
768: {
slidesPerView: 2
},
// For screens 1024px and larger, display 3 slides per view
1024: {
slidesPerView: 3
}
}
});
```Conclusion
Building a responsive card slider using HTML, CSS, and JavaScript is an essential skill for web developers. This feature improves user experience by providing a dynamic and visually engaging way to interact with content. Through this tutorial, you have learned how to organize HTML, style with CSS, and implement functionality with JavaScript to create a fully operational card slider. Continue experimenting with various styles and features to make your card sliders even more captivating and interactive.
Create Responsive Card Slider Using html css and javascript