Learn how to create a responsive details card slider using HTML, CSS, and JavaScript with this tutorial. Code snippets are included for easy customization.
Table of Contents
The details card slider is a popular design pattern used in many websites and applications. It allows you to display information or images in a visually appealing way by using a series of cards that can be navigated using a slider. In this tutorial, we will show you how to create a responsive details card slider using HTML, CSS, and JavaScript. We will also include code snippets that can be used as a starting point for customization.
Creating a responsive details card slider can be a great way to showcase your products, services, or information. It allows your users to interact with your content in a dynamic way and can make your website or application more engaging. By using HTML, CSS, and JavaScript, you can create a details card slider that works on all devices, including desktops, tablets, and smartphones.
In the following sections, we will guide you step-by-step through the process of creating a responsive details card slider, starting with building the HTML structure, styling it with CSS, and adding functionality with JavaScript. We will also show you how to customize the details card slider to fit your website or application's design.
Let's start making an amazing responsive details card slider using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Code by: Ricardo Velarde
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our details card slider.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This code is an HTML document that defines the structure and styling of a slider that displays information cards about powerful women.
The first part of the code contains the document's basic information, such as the document type, language, and the page title. It also includes meta tags for character encoding and the viewport, which is important for responsive design.
The code then imports two CSS files for styling. The first file contains common styles used across different pages, and the second file contains the specific styles for the slider.
The body of the document contains a wrapper element with a class of "main-wrapper" that contains the slider. The slider consists of two main containers, the "sl-header-wrapper" and the "sl-wrapper."
The "sl-header-wrapper" contains the slider's header with a title, subtitle, and description of the slider's content. It also contains navigation buttons that allow the user to move to the next or previous slide.
The "sl-wrapper" contains the slider's content, which is structured as a "swiper-container" with a "swiper-wrapper" that contains the individual slides. Each slide is defined as a "swiper-slide" element that contains an image of the powerful woman, her name, and a short description of her.
Each slide also contains a "sl--content-wrapper" element with two child elements, the "sl--content-container" and the "sl--card-nav-container." The "sl--content-container" contains the detailed information about the powerful woman, including her name, a longer description, and a link to more information. The "sl--card-nav-container" contains a button that reveals the detailed information about the powerful woman when clicked.
This is the basic structure of our details card slider indicator using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the details card slider is in place, the next step is to add styling to the card slider using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our details card slider.
Below is a CSS code snippet that defines the styling rules for a web page.
The first rule sets the box-sizing property for all elements to border-box, which includes padding and border in the element's total width and height.
The body rule sets the padding-top property to 0 and specifies a font-family of "Rubik", sans-serif for the entire page.
The .main-wrapper rule sets the maximum width of the wrapper element to 1662px and centers it horizontally using the margin property.
The .sl-wrapper rule sets the position property to relative. The .sl-nav rule defines a navigation element with a fixed width and height. The .swiper-button-next and .swiper-button-prev rules define the navigation buttons for the swiper slider and set their background-image property to a blank URL. The .sl-bkg-img and .sl-gradient rules set the background images for the swiper slider.
The .sl--content-container rule sets the position of the content container to absolute and the background color to #ffffff. The .sl--sub-text rule sets the font-weight to 300 for a lighter font, and the .content-reveal-btn rule sets the background color of a button to #04b7ac. The .sl--show-card-info and .sl--close-card-info rules specify the styling for show and close buttons.
The @media rule defines styles for screen sizes larger than or equal to 320px. The .sl-header-wrapper rule sets the padding for the header, and the h3, h4, and p rules set font sizes, weights, and spacings for the header text. The .swiper-slide-prev .slide-cover, .swiper-slide-next .slide-cover, and .slide-cover rules define the cover for each slide. The .swiper-slide-active .slide-cover rule sets the cover for the active slide. The .swiper-container rule sets the width and height of the swiper slider, and the .swiper-button-next and .swiper-button-prev rules set the navigation buttons to display: none. The .sl-card-wrapper rule sets the position of the card wrapper element and the overflow property to hidden. Finally, the .sl--content-wrapper and .sl--content-wrapper-inactive rules define the content wrapper for the swiper slider.
This will give our details card slider an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
* {
box-sizing: border-box;
}
body {
/*Removing touch highlights on smartphones*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding-top: 0;
font-family: "Rubik", sans-serif;
}
.main-wrapper {
max-width: 1662px;
margin: 0 auto;
}
/*-------------------------------------------------------
-------------------------------------------------------
-------------------------------------------------------*/
/* SLIDE LAYOUT
/*-------------------------------------------------------
-------------------------------------------------------
-------------------------------------------------------*/
.sl-wrapper {
position: relative;
}
.sl-nav {
position: relative;
width: 100px;
height: 60px;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev,
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url();
}
.swiper-button-next,
.swiper-button-prev {
width: 35px;
}
/*-------------------------------------------------------*/
/* Card Bkg Img
/*-------------------------------------------------------*/
.sl-bkg-img,
.sl-gradient {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
}
.sl-img-1 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/wonder_woman_ver6_xxlg.png");
}
.sl-img-2 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/Leia_Organa.png");
}
.sl-img-3 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/laraCroft.png");
}
.sl-gradient {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/614007/gradient.png");
z-index: 1;
}
/*-------------------------------------------------------*/
/* Card Content
/*-------------------------------------------------------*/
.sl--content-container {
position: absolute;
background-color: #ffffff;
}
.sl--content-container h2 {
text-transform: uppercase;
}
.sl--sub-text {
font-weight: 300;
}
.content-reveal-btn {
background-color: #04b7ac;
}
.sl--show-card-info,
.sl--close-card-info {
fill: #ffffff;
}
.sl--show-card-info {
transform: scale(0.6, 0.6);
-webkit-transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.sl--close-card-info {
-ms-transform: rotate(45deg) scale(0.6, 0.6);
-webkit-transform: rotate(45deg) scale(0.6, 0.6);
transform: rotate(45deg) scale(0.6, 0.6);
-webkit-transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
/*--------------------------
Media Queries
--------------------------*/
/* Mobile */
@media only screen and (min-width: 320px) {
/* 320px */
/*-------------------------------------------------------*/
/* SL Header: 320
/*-------------------------------------------------------*/
.sl-header-wrapper {
padding: 0 18px;
}
.sl-header-wrapper h3 {
font-size: 50px;
font-weight: 900;
line-height: 80%;
letter-spacing: -1.4px;
margin: 10px 0;
}
.sl-header-wrapper h4 {
font-weight: 500;
text-transform: uppercase;
margin: 0;
line-height: 100%;
letter-spacing: -1.4px;
word-spacing: 2.4px;
}
.sl-header-wrapper p {
font-weight: 300;
}
/*-------------------------------------------------------*/
/* Prev/Next Slide Cover: 320
/*-------------------------------------------------------*/
.sl-nav {
display: none;
}
.swiper-slide-prev .slide-cover,
.swiper-slide-next .slide-cover,
.slide-cover {
background-color: #ffffff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
z-index: 2;
opacity: 0.75;
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
visibility: visible;
}
.swiper-slide-active .slide-cover {
position: absolute;
opacity: 0;
-webkit-transition: visibility 0s 0.5s, opacity 300ms;
transition: visibility 0s 0.5s, opacity 300ms;
height: 100%;
width: 100%;
background-color: #ffffff;
z-index: 2;
visibility: hidden;
}
/*-------------------------------------------------------*/
/* Swiper: 320
/*-------------------------------------------------------*/
.swiper-container {
width: 95%;
height: 100%;
}
.swiper-button-next,
.swiper-button-prev {
display: none;
}
/*-------------------------------------------------------*/
/* Card: 320
/*-------------------------------------------------------*/
.sl-card-wrapper {
position: relative;
height: 540px;
overflow: hidden;
}
/*-------------------------------------------------------*/
/* Card Bkg Img: 320
/*-------------------------------------------------------*/
.sl-gradient {
background-position: center 210px;
}
.sl-bkg-img {
background-size: cover;
background-position: center top;
}
/*-------------------------------------------------------*/
/* Card Content: 320
/*-------------------------------------------------------*/
.sl--content-wrapper {
position: absolute;
z-index: 1;
top: 0;
left: 50%;
transform: translate(-50%, 0);
-webkit-transition: width 250ms, height 250ms;
transition: width 250ms, height 250ms;
overflow: hidden;
}
.sl--content-wrapper-inactive {
width: 101%;
height: 541px;
}
.sl--content-wrapper-active {
width: 101%;
height: 100%;
}
.sl--content-container {
width: 100%;
height: auto;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.sl--card-hide {
transform: translate(0, 410px);
-webkit-transition: transform 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86),
width 250ms;
transition: transform 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86),
width 250ms;
height: 568px;
}
.sl--card-reveal {
transform: translate(0, 0);
-webkit-transition: transform 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86),
width 250ms;
transition: transform 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86),
width 250ms;
height: 100%;
width: 100%;
overflow: auto;
/*padding: 100px 0px;*/
padding-top: 20px;
padding-bottom: 100px;
}
.sl--content-container h2 {
font-size: 30px;
word-spacing: 2px;
letter-spacing: -1.4px;
margin-top: 0;
margin-bottom: 0;
}
.sl--sub-text {
margin-bottom: 0;
-webkit-transition: margin 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: margin 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.sl--card-reveal .sl--sub-text {
margin-top: 12%;
}
.sl--content-container .sl--card-content {
font-weight: 300;
margin-top: 15px;
overflow-y: auto;
}
.sl--link {
color: #04b7ac;
margin-bottom: 15px;
}
.sl--card-nav-container {
position: absolute;
width: 100%;
height: 70px;
z-index: 1;
bottom: 0;
/*background-color: #ffffff;*/
background-image: linear-gradient(0deg, #f5f5f5, hsla(37, 87%, 97%, 0));
}
.sl--content-btn {
position: absolute;
right: 0;
bottom: 0;
width: 37px;
height: 37px;
cursor: pointer;
z-index: 1;
}
.content-hide-btn {
transform: scale(0, 0);
}
}
@media only screen and (min-width: 375px) {
/* 375 */
/*-------------------------------------------------------*/
/* Card Bkg Img: 375
/*-------------------------------------------------------*/
.sl-gradient {
background-position: center 300px;
}
/*-------------------------------------------------------*/
/* Card Content: 375
/*-------------------------------------------------------*/
.sl-card-wrapper,
.sl--content-wrapper-inactive {
height: 600px;
}
.sl--content-wrapper-inactive {
width: 91%;
}
.sl--content-container {
height: 372px;
}
.sl--card-reveal {
height: 100%;
width: 100%;
}
.sl--card-hide {
transform: translate(0, 465px);
height: 667px;
}
}
@media only screen and (min-width: 414px) {
/* 414 */
/*-------------------------------------------------------*/
/* SL Header: 414
/*-------------------------------------------------------*/
.sl-header-wrapper h3 {
font-size: 55px;
}
/*-------------------------------------------------------*/
/* Card Content: 414
/*-------------------------------------------------------*/
.sl-card-wrapper,
.sl--content-wrapper-inactive {
height: 650px;
}
.sl--card-hide {
height: 740px;
transform: translate(0, 495px);
}
}
/*Tablet*/
@media only screen and (min-width: 768px) {
/* 768 */
/*-------------------------------------------------------*/
/* SL Main Container: 768
/*-------------------------------------------------------*/
.sl-main-container {
width: 768px;
margin: 0 auto;
}
/*-------------------------------------------------------*/
/* SL Header: 768
/*-------------------------------------------------------*/
.sl-header-wrapper {
padding: 0 5%;
}
.sl-header-wrapper h3 {
width: 300px;
font-size: 65px;
}
.sl-header-wrapper p {
width: 505px;
}
/*-------------------------------------------------------*/
/* Swiper: 768
/*-------------------------------------------------------*/
.swiper-container {
width: 690px;
}
/*-------------------------------------------------------*/
/* Card Content: 768
/*-------------------------------------------------------*/
.sl-card-wrapper {
width: 325px;
height: 540px;
}
.sl--content-wrapper-inactive {
width: 290px;
height: 100%;
}
.sl--content-wrapper-active {
width: 101%;
}
.sl--card-hide {
transform: translate(0, 375px);
}
.sl-gradient {
background-position: center 185px;
}
}
/* Desktop */
@media only screen and (min-width: 1024px) {
/* 1024 */
/*-------------------------------------------------------*/
/* Main Wrapper: 1024
/*-------------------------------------------------------*/
/*-------------------------------------------------------*/
/* SL Main Container: 1024
/*-------------------------------------------------------*/
.sl-main-container {
width: 1024px;
}
/*-------------------------------------------------------*/
/* SL Header: 1024
/*-------------------------------------------------------*/
.sl-header-wrapper {
padding: 50px 2% 0 5%;
width: 500px;
display: inline-block;
float: left;
}
.sl-header-wrapper p {
width: 100%;
}
/*-------------------------------------------------------*/
/* Swiper: 1024
/*-------------------------------------------------------*/
.sl-wrapper {
height: 540px;
width: 522px;
display: inline-block;
}
.swiper-container {
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
width: 505px;
height: 540px;
}
.swiper-button-next,
.swiper-button-prev {
display: block;
}
/*-------------------------------------------------------*/
/* Prev/Next Slide Cover: 1024
/*-------------------------------------------------------*/
.sl-nav {
display: block;
}
}
@media only screen and (min-width: 1440px) {
.sl-main-container {
width: 1440px;
}
.sl-wrapper,
.swiper-container {
width: 920px;
}
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript that uses the jQuery library and the Swiper library to create a responsive slideshow with navigation arrows and breakpoints. It also includes functionality to reveal and hide content on the slideshow and to hide the content when the slide changes.
The program starts by defining a function that initializes the Swiper object, which is responsible for creating the slideshow. The Swiper object takes a number of options, including the number of slides to display per view and the breakpoints at which to adjust the number of slides displayed.
The program then defines a function that toggles the visibility of content within the slideshow when a button is clicked. This function selects the appropriate slide, hides the content on all other slides, and reveals the content on the selected slide.
Finally, the program defines a function that hides the content when the slide changes. This function is triggered when the Swiper object detects that the slide has changed, and it hides the content on the previous slide while leaving the content on the current slide visible.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
$(document).ready(function() {
"use strict";
/* Swiper
-------------------------------------------------------*/
//initialize swiper when document ready
var mySwiper = new Swiper(".swiper-container", {
// Navigation arrows
nextButton: ".swiper-button-next",
prevButton: ".swiper-button-prev",
slidesPerView: 2.7,
centeredSlides: true,
breakpoints: {
1440: {
slidesPerView: 2.6
},
1439: {
slidesPerView: 1.45
},
1024: {
slidesPerView: 1.45
},
1023: {
slidesPerView: 2
},
768: {
slidesPerView: 2
},
568: {
slidesPerView: 1.5,
spaceBetween: 10
},
414: {
slidesPerView: 1.09,
spaceBetween: 3
},
320: {
slidesPerView: 1.09,
spaceBetween: 3
}
}
});
/* Info Card
-------------------------------------------------------*/
var $revealCardContentBtn = $(".sl--card-nav-container"),
$contentContainer = $(
".sl-card-wrapper .sl--content-wrapper .sl--content-container"
),
$navGFX = $(
".sl-card-wrapper .sl--content-wrapper .sl--card-nav-container .sl--content-btn .card-nav-gfx"
);
$revealCardContentBtn.on("click", function() {
var parent = $(this).closest(".swiper-slide");
// IC Container
parent
.siblings()
.find($contentContainer)
.removeClass("sl--card-reveal");
parent
.siblings()
.find($contentContainer)
.addClass("sl--card-hide");
parent.find($contentContainer).toggleClass("sl--card-hide sl--card-reveal");
// IC Nav wrapper
parent
.siblings()
.find(".sl--content-wrapper")
.removeClass("sl--content-wrapper-active");
parent
.siblings()
.find(".sl--content-wrapper")
.addClass("sl--content-wrapper-inactive");
parent
.find(".sl--content-wrapper")
.toggleClass("sl--content-wrapper-inactive sl--content-wrapper-active");
// IC Nav GFX
parent
.siblings()
.find($navGFX)
.removeClass("sl--close-card-info");
parent
.siblings()
.find($navGFX)
.addClass("sl--show-card-info");
parent.find($navGFX).toggleClass("sl--show-card-info sl--close-card-info");
});
/* Hide content on slide change
-------------------------------------------------------*/
mySwiper.on("onSlideChangeStart", function() {
if ($contentContainer.hasClass("sl--card-reveal")) {
var $CI_ContentWrapper = $(".sl--content-wrapper");
$contentContainer.removeClass("sl--card-reveal");
$contentContainer.addClass("sl--card-hide");
$navGFX.removeClass("sl--close-card-info");
$navGFX.addClass("sl--show-card-info");
$CI_ContentWrapper.removeClass("sl--content-wrapper-active");
$CI_ContentWrapper.addClass("sl--content-wrapper-inactive");
}
});
}); Final Output:
Conclusion:
In this tutorial, we have shown you how to create a responsive details card slider using HTML, CSS, and JavaScript. We started by building the HTML structure for the slider. Then, we added styles to the slider using CSS properties like "display", "position", "width", and "height".
After styling the slider, we added functionality to it using JavaScript. We also showed you how to customize the slider to fit your website or application's design by including code snippets that can be used as a starting point for customization.
Creating a responsive details card slider is a great way to showcase your products, services, or information. It allows your users to interact with your content in a dynamic way and can make your website or application more engaging. By using the skills you have learned in this tutorial, you can create a details card slider that works on all devices and is customized to fit your specific needs.
We hope that this tutorial has been helpful and that you have learned something new. If you have any questions or feedback, please feel free to leave a comment or get in touch with us. Thanks for reading!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
