Hello guys! In this blog, we will learn how to make card slider in HTML CSS and Javascript.
In the world of web design, staying on top of the latest trends is a must, right? And one of the coolest things making websites pop right now is dark theme profile card slider. These babies bring together style, functionality, and a whole lot of interactivity to make your site look amazing and super user friendly. In this blog post, we’re diving deep into the world of dark theme profile card slider. We’ll break it all down, what they are, why they are dope, and how you can level up your web design game.
Video Tutorial:
You can also watch a video tutorial on this blog, “How to Make Card Slider in HTML CSS and Javascript – CSS Card Slider”, in the video below. Everything is done step by step, you can check out this video.
Getting the Lowdown on Profile Card Slider
First things first, profile card slider are all about showing off multiple profiles or content bits in a compact and stunning way. They’re like a deck of cards you can swipe through, each card representing a different profile or piece of content.
Here’s what’s happening in profile card slider with dark themes:
Card Setup: Each card has its own space, and it usually includes an image, a little blurb, and some info. The dark theme sets the stage, making everything look super sleek.
Slide and Glide: You can scroll or click your way through the cards to check out different profiles or content. It’s interactive and makes exploring a breeze.
Dark and Mysterious: The dark theme is a big deal. It means the background or overall design are embracing dark, stylish colors like black, deep gray, or dark blue. This not only looks cool but makes the content stand out.
Make It Your Own: You can customize the design, making it look and feel just like your website. Play around with animation, transition, and styles to match your site’s vibe.
Adapts to Any Screen: These sliders are smart, they look good on all kinds of screens and devices. So your visitors get a smooth experience no matter what they’re using.
Why Dark Theme Profile Card Sliders Rock
Dark theme profile card sliders are all the rage, and here’s why:
Efficient Content Showoff: These sliders are perfect when you want to showcase loads of profiles or content in a compact space. If you’ve got limited room on your site, this is your go to move.
Stylish Vibes: The dark theme adds a dash of class and elegance to your design. The contrast between dark background and colorful content creates a super cool effect that grabs everyone’s attention.
Engagement and Fun: Since these sliders are interactive, they invite users to dive into the content. Swiping through profiles or content items is easy and super fun, making the experience way more exciting.
Content Takes the Spotlight: Dark themes put the spotlight on your content. Whether it’s your portfolio, product showcase, or individual profiles, the focus is all on what you’re showing off.
User Friendly Design: Profile card sliders are built with users in mind. They keep things simple, so your visitors can explore without getting lost or overwhelmed.
Versatile Vibes: These sliders are super flexible. You can use them for team profiles, product highlights, client feedback, or whatever you want. They’re like a chameleon, fitting any situation.
The Elements of an Epic Dark Theme Profile Card Slider
To whip up a profile card slider with an epic dark theme, keep these elements in mind:
Dark Colors Everywhere: Your dark theme should be consistent, with dark background. Think deep black, cool gray, and maybe some rich blue or purple. That’s your ticket to the stylish dark look.
Top Notch Pics: Use high res images for your profile cards. They should be clear, well lit, and ready to shine against the dark backdrop.
Letter Look: Choose legible fonts for your text. Light text on dark background is often easier to read, so keep font size and spacing in check.
Card Magic: Design each card carefully. Include image, name, title, description, and any other info you want. Use icon and font that match your dark theme.
Nav Control: Add some navigation control so user can move through the profiles easily. Make sure they match your dark theme style.
Animation Action: Add subtle animation to make your slider look even cooler. Think about transition, fade in, or a bit of hover magic.
How to Get Your Own Dark Theme Profile Card Slider
Ready to make your website stand out with a dark theme profile card slider? Here’s your game plan:
Plan It Out: Figure out what you want to showcase with your profile card slider. Is it your team, product, customer testimonial, or something else? Define your content goals.
Collect Your Good: Gather high quality images, text, and any other info for each profile card. Make sure everything looks awesome and is ready to impress.
Dark Theme Style: Choose a dark color scheme that matches your website vibe. Play with different dark shades until you find the one that makes your content pop.
Build Your Slider: Use HTML, CSS and maybe a dash of JavaScript to make your slider. Design your cards with CSS, and don’t forget about responsive design for different screen.
Nav and Animation: Add navigation control and animation to make the slider even more amazing. Test it to make sure it’s smooth and works on any device.
Listen to Users: Collect feedback from your users to understand how they interact with the slider. Use their insights to make your design even better.
Source Files – Profile Card Slider:
HTML Code:
<!DOCTYPE html>
<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 HTML CSS | Codehal</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<div class="swiper mySwiper container">
<div class="swiper-wrapper content">
<div class="swiper-slide card">
<div class="card-content">
<div class="image">
<img src="img1.jpg" alt="">
</div>
<div class="social-media">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-github"></i>
</div>
<div class="name-profession">
<span class="name">Someone Name</span>
<span class="profession">Web Developer</span>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<div class="button">
<button class="aboutMe">About Me</button>
<button class="hireMe">Hire Me</button>
</div>
</div>
</div>
<div class="swiper-slide card">
<div class="card-content">
<div class="image">
<img src="img2.jpg" alt="">
</div>
<div class="social-media">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-github"></i>
</div>
<div class="name-profession">
<span class="name">Someone Name</span>
<span class="profession">Web Developer</span>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<div class="button">
<button class="aboutMe">About Me</button>
<button class="hireMe">Hire Me</button>
</div>
</div>
</div>
<div class="swiper-slide card">
<div class="card-content">
<div class="image">
<img src="img3.jpg" alt="">
</div>
<div class="social-media">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-github"></i>
</div>
<div class="name-profession">
<span class="name">Someone Name</span>
<span class="profession">Web Developer</span>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<div class="button">
<button class="aboutMe">About Me</button>
<button class="hireMe">Hire Me</button>
</div>
</div>
</div>
<div class="swiper-slide card">
<div class="card-content">
<div class="image">
<img src="img4.jpg" alt="">
</div>
<div class="social-media">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-github"></i>
</div>
<div class="name-profession">
<span class="name">Someone Name</span>
<span class="profession">Web Developer</span>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<div class="button">
<button class="aboutMe">About Me</button>
<button class="hireMe">Hire Me</button>
</div>
</div>
</div>
<div class="swiper-slide card">
<div class="card-content">
<div class="image">
<img src="img5.jpg" alt="">
</div>
<div class="social-media">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-github"></i>
</div>
<div class="name-profession">
<span class="name">Someone Name</span>
<span class="profession">Web Developer</span>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<div class="button">
<button class="aboutMe">About Me</button>
<button class="hireMe">Hire Me</button>
</div>
</div>
</div>
<div class="swiper-slide card">
<div class="card-content">
<div class="image">
<img src="img6.jpg" alt="">
</div>
<div class="social-media">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-github"></i>
</div>
<div class="name-profession">
<span class="name">Someone Name</span>
<span class="profession">Web Developer</span>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<div class="button">
<button class="aboutMe">About Me</button>
<button class="hireMe">Hire Me</button>
</div>
</div>
</div>
<div class="swiper-slide card">
<div class="card-content">
<div class="image">
<img src="img7.jpg" alt="">
</div>
<div class="social-media">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-github"></i>
</div>
<div class="name-profession">
<span class="name">Someone Name</span>
<span class="profession">Web Developer</span>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<div class="button">
<button class="aboutMe">About Me</button>
<button class="hireMe">Hire Me</button>
</div>
</div>
</div>
<div class="swiper-slide card">
<div class="card-content">
<div class="image">
<img src="img8.jpg" alt="">
</div>
<div class="social-media">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-github"></i>
</div>
<div class="name-profession">
<span class="name">Someone Name</span>
<span class="profession">Web Developer</span>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<div class="button">
<button class="aboutMe">About Me</button>
<button class="hireMe">Hire Me</button>
</div>
</div>
</div>
<div class="swiper-slide card">
<div class="card-content">
<div class="image">
<img src="img9.jpg" alt="">
</div>
<div class="social-media">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-github"></i>
</div>
<div class="name-profession">
<span class="name">Someone Name</span>
<span class="profession">Web Developer</span>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<div class="button">
<button class="aboutMe">About Me</button>
<button class="hireMe">Hire Me</button>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</section>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>CSS Code:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
section {
position: relative;
height: 500px;
width: 1075px;
display: flex;
align-items: center;
}
.swiper {
width: 950px;
}
.container {
border-radius: 20px;
}
.card .image {
width: 140px;
height: 140px;
border-radius: 50%;
}
.card .image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 3px solid #000;
}
.card {
position: relative;
background: #000;
border: 3px solid #0ef;
border-radius: 20px;
}
.card::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #0ef;
clip-path: circle(55% at 0 0);
border-top-left-radius: 10px;
}
.card .card-content {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
padding: 30px;
}
.card .social-media {
position: absolute;
top: 10px;
right: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.card .social-media i {
color: #fff;
margin-top: 10px;
cursor: pointer;
transition: .3s;
}
.card .social-media i:hover {
color: #0ef;
}
.card .name-profession {
display: flex;
align-items: center;
flex-direction: column;
margin-top: 10px;
color: #fff;
}
.name-profession .name {
font-size: 20px;
font-weight: 600;
}
.name-profession .profession {
font-size: 15px;
font-weight: 500;
}
.card .rating {
display: flex;
align-items: center;
margin-top: 18px;
}
.card .rating i {
font-size: 18px;
color: #0ef;
margin: 0 2px;
}
.card .button {
display: flex;
justify-content: space-around;
width: 110%;
margin-top: 20px;
}
.card .button button {
background: #0ef;
border: none;
outline: none;
color: #000;
font-weight: 600;
padding: 8px 22px;
border-radius: 20px;
font-size: 14px;
cursor: pointer;
transition: .3s;
}
.card .button button:hover {
background: #fff;
}
.swiper-pagination-bullet {
height: 7px;
width: 26px;
background: #0ef;
border-radius: 25px;
}
.swiper-button-next,
.swiper-button-prev {
color: #0ef;
}JavaScript Code:
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 3,
loop: true,
grabCursor: true,
loopFillGroupWithBlank: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});Conclusion
A dark theme profile card slider is a dynamic and visually stunning addition to your web design toolbox. It’s a space efficient way to showcase content, engage your audience, and create an elegant atmosphere. Whether you’re displaying your portfolio, introducing your team, or sharing customer testimonial, the dark theme profile card slider can set your website apart and leave a lasting impression. Plan your content, choose your style, and get ready to make your website unforgettable in the digital world. So that’s an explanation of how to make card slider in html css and javascript.