Card sliders are a fantastic way to showcase content in a visually appealing and interactive manner. Whether you’re displaying testimonials, team members, or product features, a card slider can make your website more engaging. In this blog, we’ll walk through how to create a stylish and responsive Image Slider In HTML And CSS. No JavaScript required!
What is a Card Slider?
A card slider is a UI component that displays multiple cards (containing images, text, or other content) in a horizontal or vertical scrollable layout. It’s perfect for situations where you want to highlight multiple pieces of content without overwhelming the user.
Setting Up the HTML Structure
Let’s start by creating the basic HTML structure for our card slider. Each card will contain an image, a title, and a description.
<!DOCTYPE html>
<!-- Coding By CodeWithKailas - https://codewithkailas.com/ -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Card Slider in HTML & CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="container">
<div class="card">
<div class="image">
<img src="image.jpg" alt="" />
</div>
<h2>Someone Name</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elite.</p>
</div>
<div class="card">
<div class="image">
<img src="image.jpg" alt="" />
</div>
<h2>Someone Name</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elite.</p>
</div>
<div class="card">
<div class="image">
<img src="image.jpg" alt="" />
</div>
<h2>Someone Name</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elite.</p>
</div>
<div class="card">
<div class="image">
<img src="image.jpg" alt="" />
</div>
<h2>Someone Name</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elite.</p>
</div>
</section>
</body>
</html>Styling the Card Slider with CSS
Now, let’s add some CSS to style the card slider and make it interactive. We’ll use modern CSS features like flexbox, scroll-snap, and custom scrollbars.
@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 {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #e3f2fd;
}
/* Custom scrollbar */
::-webkit-scrollbar {
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 25px;
}
::-webkit-scrollbar-thumb {
background: #6e93f7;
border-radius: 25px;
}
::-webkit-scrollbar-thumb:hover {
background: #4070f4;
}
/* Container for the cards */
.container {
display: flex;
gap: 12px;
max-width: 400px;
width: 100%;
background: #4070f4;
border-radius: 12px;
padding: 30px;
scroll-snap-type: x mandatory;
overflow-x: scroll;
scroll-padding: 30px;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
scroll-behavior: smooth; /* Smooth scrolling */
}
/* Individual card styling */
.container .card {
display: flex;
flex: 0 0 100%;
flex-direction: column;
align-items: center;
padding: 30px;
border-radius: 12px;
background: #fff;
scroll-snap-align: start;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover effect */
}
/* Card hover effect */
.container .card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}
/* Image styling */
.card .image {
height: 150px;
width: 150px;
padding: 4px;
background: #4070f4;
border-radius: 50%;
}
.image img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 50%;
border: 5px solid #fff;
}
/* Text styling */
.card h2 {
margin-top: 25px;
color: #333;
font-size: 22px;
font-weight: 600;
}
.card p {
margin-top: 4px;
font-size: 18px;
font-weight: 400;
color: #333;
text-align: center;
}
/* Responsive design for smaller screens */
@media (max-width: 480px) {
.container {
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
max-height: 80vh;
}
.container .card {
flex: 0 0 auto;
margin-bottom: 12px;
}
}How It Works
1. Container:
- The .container uses flexbox to arrange the cards horizontally.
- scroll-snap-type: x mandatory ensures that the cards snap into place when scrolling.
2. Cards:
- Each .card is styled with a white background, rounded corners, and a subtle shadow.
- The hover effect lifts the card slightly and increases the shadow for interactivity.
3. Images:
- The .image div is styled as a circle with a blue background, and the image inside it is cropped to fit.
4. Responsive Design:
- On smaller screens, the cards stack vertically, and the container allows vertical scrolling.
Customizing the Card Slider
You can customize the card slider by:
- Changing the number of cards.
- Adjusting the size and colors.
- Adding more content (e.g., buttons, icons) to the cards.
- Using different images or content types.
Interesting Points to Enhance Your Card Slider
1. Add Navigation Buttons: Include “Previous” and “Next” buttons to allow users to navigate through the cards manually. This can be done with a bit of JavaScript.
2. Autoplay Feature: Use JavaScript to automatically scroll through the cards at set intervals. This can make your slider more dynamic.
3. Infinite Scrolling: Implement infinite scrolling so that the slider loops back to the first card after reaching the last one.
4. Interactive Indicators: Add indicators (e.g., dots) below the slider to show the current position and allow users to jump to specific cards.
5. Animated Transitions: Use CSS animations or JavaScript to add smooth transitions between cards.
6. Accessibility Improvements: Ensure the slider is keyboard-navigable and screen-reader friendly by adding ARIA attributes.
7. Lazy Loading: Implement lazy loading for images to improve performance, especially if you have many high-resolution images.
8. Integration with APIs: Fetch card content dynamically from an API to make your slider more versatile and data-driven.
Conclusion
Creating a card slider with HTML and CSS is a simple yet effective way to enhance your website’s design. With just a few lines of code, you can build a responsive and interactive slider that works seamlessly across devices.