Hey everyone! Today, let’s create a Card Slider using HTML, CSS, and JavaScript. It’s a fun way to showcase content on your website. Whether you’re a coding pro or just getting started, this tutorial is a great opportunity to add an interactive touch to your projects.
We’ll use HTML for structure, CSS for style, and JavaScript for a smooth sliding effect. No need for anything fancy – just simple coding to make your web content stand out.
Join me on this coding adventure into the world of Card Sliders. Let’s keep it straightforward and enjoyable with HTML, CSS, and JavaScript. Ready to add a cool Card Slider to your projects? Let’s dive in!
HTML :
The provided code is an HTML document that creates a card slider using the Swiper library. It displays a series of slider items, each containing an image and accompanying content. Users can navigate through the slider using the previous and next buttons. The Swiper library is included via a CDN, and the slider functionality is implemented in the accompanying script.js file.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Card Slider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="slider-item swiper-slide">
<div class="slider-image-wrapper">
<img class="slider-image" src="https://images.unsplash.com/photo-1498307833015-e7b400441eb8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2600&q=80" alt="SliderImg">
</div>
<div class="slider-item-content">
<h1>Exploring Italy's Beauty</h1>
<p>Discover the breathtaking landscapes, rich history, and delectable cuisine of Italy in this mesmerizing journey.</p>
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slider-image-wrapper">
<img class="slider-image" src="https://images.unsplash.com/photo-1491900177661-4e1cd2d7cce2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" alt="SliderImg">
</div>
<div class="slider-item-content">
<h1>Exploring Hidden Bunkers</h1>
<p>Uncover the secrets of underground bunkers and their historical significance in this thrilling adventure.</p>
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slider-image-wrapper">
<img class="slider-image" src="https://images.unsplash.com/photo-1482192505345-5655af888cc4?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2600&q=80" alt="SliderImg">
</div>
<div class="slider-item-content">
<h1>Scaling Small Mountains</h1>
<p>Embark on an adventurous journey to conquer the challenging peaks of small mountains and embrace the thrill of the climb.</p>
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slider-image-wrapper">
<img class="slider-image" src="https://images.unsplash.com/photo-1564604761388-83eafc96f668?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=801.2.1&auto=format&fit=crop&w=2167&q=80" alt="SliderImg">
</div>
<div class="slider-item-content">
<h1>Walking On a Dream</h1>
<p>Experience the dreamlike landscapes and surreal beauty of distant lands in this enchanting expedition.</p>
</div>
</div>
</div>
<div class="slider-buttons">
<button class="swiper-button-prev">Prev</button>
<button class="swiper-button-next">Next</button>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js'></script><script src="./script.js"></script>
</body>
</html>
CSS :
The provided code is a CSS stylesheet that defines the styling for a webpage. It includes various rules for elements such as the body, headings, paragraphs, and a slider component. The code sets the font family, background color, animations, transitions, and other visual properties for the webpage. It also includes media queries to adjust the styles for different screen sizes. The code uses the Montserrat font from Google Fonts and defines a gradient background color for the body. The slider component is styled with a gradient background, border radius, and pagination buttons. The social links are positioned fixed at the top right corner of the page.
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
* {
box-sizing: border-box;
}
html {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: "Montserrat", sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background-color: #602dad;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 32px;
}
h1 {
margin: 0;
font-weight: bold;
font-size: 24px;
line-height: 32px;
color: #26384E;
transform: translateY(20px);
transition: all 0.4s ease;
transition-delay: 0.2s;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}
@media screen and (max-width: 520px) {
h1 {
font-size: 16px;
line-height: 24px;
}
}
p {
font-size: 16px;
line-height: 24px;
color: #889DB8;
transform: translateY(20px);
transition: all 0.4s ease;
transition-delay: 0.3s;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (max-width: 520px) {
p {
font-size: 14px;
line-height: 20px;
}
}
.swiper-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
z-index: 1;
position: relative;
}
.swiper-container {
background: linear-gradient(270deg, #f7f9ff 0%, #f2f6ff 100%);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
width: 100%;
position: relative;
max-width: 420px;
height: 100%;
max-height: 420px;
border-radius: 10px;
}
.slider-image-wrapper {
height: 200px;
width: 100%;
overflow: hidden;
}
.slider-item {
width: 100%;
height: 100%;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
flex-shrink: 0;
opacity: 0;
background: linear-gradient(270deg, #f7f9ff 0%, #f2f6ff 100%);
cursor: -webkit-grab;
cursor: grab;
}
.slider-item-content {
padding: 32px;
display: flex;
flex-direction: column;
justify-content: center;
transition: 0.4s;
}
.slider-item-content > * {
opacity: 0;
transform: translateY(20px);
}
.swiper-slide-active .slider-item-content > * {
transform: translateY(0px);
opacity: 1;
}
.slider-image {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: 0.2s;
}
.swiper-pagination {
position: absolute;
left: 50%;
bottom: 8px;
transform: translatex(-50%);
z-index: 1;
width: auto !important;
}
.swiper-pagination-bullet {
border-radius: 0;
width: 8px;
height: 8px;
border-radius: 50%;
line-height: 30px;
font-size: 12px;
opacity: 1;
background: rgba(255, 185, 0, 0.3);
display: inline-block;
margin-right: 8px;
cursor: pointer;
transition: all 0.2s;
}
.swiper-pagination-bullet-active {
background: #FFB200;
width: 20px;
border-radius: 10px;
}
.slider-buttons {
position: absolute;
display: flex;
top: 100%;
justify-content: flex-end;
width: 100%;
padding-top: 8px;
}
.swiper-button-next,
.swiper-button-prev {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
color: #fff;
position: relative;
margin-left: 4px;
}
.swiper-button-next:before,
.swiper-button-prev:before {
content: "";
position: absolute;
background-color: #fff;
height: 1px;
width: 0;
left: 0;
bottom: -1px;
transition: 0.2s;
}
.swiper-button-next:hover:before,
.swiper-button-prev:hover:before {
width: 100%;
}
.socials {
position: fixed;
top: 12px;
right: 16px;
display: flex;
align-items: center;
}
.socials .social-link {
display: inline-block;
margin-left: 8px;
color: #fff;
}
@media screen and (max-width: 520px) {
.swiper-button-next:hover:before,
.swiper-button-prev:hover:before {
display: none;
}
}
JavaScript:
The provided code initializes a Swiper instance, a JavaScript library for creating sliders. It configures the slider to display one slide at a time with a 20px space between them. The effect is set to fade, and the slider loops continuously. The speed of the slide transition is set to 300 milliseconds. The mousewheel can be used to navigate the slider, and pagination bullets are added with dynamic behavior. Navigation arrows are also included for moving to the next and previous slides.
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 20,
effect: 'fade',
loop: true,
speed: 300,
mousewheel: {
invert: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
Great job! You’ve successfully created a stylish Card Slider using HTML, CSS, and JavaScript! Add this interactive feature to your projects and enjoy the enhanced user experience. Fantastic work – keep coding!
If your project hits a snag, no worries! Access the source code effortlessly. Click the Download button to kickstart your coding expedition. May your coding be filled with joy!
