Create Responsive Card Slider in HTML CSS & JavaScript | Card Slider in HTML CSS & JavaScript

How to Create Responsive Card Slider in HTML CSS & JavaScript


 


This is a tutorial that shows how to create a responsive card slider using HTML, CSS, and JavaScript with SwiperJS. The card slider is designed to display a collection of user profiles in a visually appealing way with a glassmorphism effect. It also uses SwiperJS to create a touch-friendly, responsive slider with navigation arrows and pagination bullets. Below is an explanation of how the code works:

1. Setting Up the Project:

  • You need to create a folder (e.g., card-slider) and inside it create three files:
    • index.html: For the HTML markup.
    • style.css: For styling the slider and cards.
    • script.js: For the JavaScript code to initialize SwiperJS.
  • Additionally, you need to include an "images" folder for the profile images used in the cards.

2. HTML Structure:

  • SwiperJS CDN: The index.html file links to the SwiperJS CSS and JavaScript libraries through CDN.
  • Cards Layout: Inside the .swiper-wrapper div, each card is represented by a .swiper-slide. Each card contains an image (.user-image), a name (.name), a skill description (.skill), and a button (.btn).
         <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Slider HTML and CSS | CodingNepal</title>
    <!-- Linking SwiperJS CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container swiper">
        <div class="slider-wrapper">
            <div class="card-list swiper-wrapper">
                <div class="card-item swiper-slide">
                    <img src="images/img-1.jpg" alt="User Image" class="user-image">
                    <h2 class="name">James Wilson</h2>
                    <p class="skill">Software Developer</p>
                    <button class="btn">Message</button>
                </div>

                <div class="card-item swiper-slide">
                    <img src="images/img-2.jpg" alt="User Image" class="user-image">
                    <h2 class="name">Sarah Johnson</h2>
                    <p class="skill">Graphic Designer</p>
                    <button class="btn">Message</button>
                </div>

                <div class="card-item swiper-slide">
                    <img src="images/img-3.jpg" alt="User Image" class="user-image">
                    <h2 class="name">Michael Brown</h2>
                    <p class="skill">Project Manager</p>
                    <button class="btn">Message</button>
                </div>

                <div class="card-item swiper-slide">
                    <img src="images/img-4.jpg" alt="User Image" class="user-image">
                    <h2 class="name">Emily Davis</h2>
                    <p class="skill">Marketing Specialist</p>
                    <button class="btn">Message</button>
                </div>

                <div class="card-item swiper-slide">
                    <img src="images/img-5.jpg" alt="User Image" class="user-image">
                    <h2 class="name">Christopher Garcia</h2>
                    <p class="skill">Data Scientist</p>
                    <button class="btn">Message</button>
                </div>

                <div class="card-item swiper-slide">
                    <img src="images/img-6.jpg" alt="User Image" class="user-image">
                    <h2 class="name">Richard Wilson</h2>
                    <p class="skill">Product Designer</p>
                    <button class="btn">Message</button>
                </div>
            </div>

            <div class="swiper-pagination"></div>
            <div class="swiper-slide-button swiper-button-prev"></div>
            <div class="swiper-slide-button swiper-button-next"></div>
        </div>
    </div>

    <!-- Linking SwiperJS script -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <!-- Linking custom script -->
    <script src="script.js"></script>
</body>
</html>
     

3. CSS Styling:
  • Glassmorphism Effect: The cards have a blurred background and semi-transparent layers, which creates a glass-like effect. This is achieved using backdrop-filter: blur(30px) and a semi-transparent black background.
  • Responsive Design: The CSS ensures that the slider adjusts to different screen sizes. For screens smaller than 768px, only one card is visible; between 768px and 1024px, two cards are shown; and for larger screens, three cards are displayed.

          /* Importing Google Font - Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: url("./destination-3.jpg") #030728 no-repeat center;
  width: 100%;
  height: 100%;
  opacity: 30;
  background-size: cover;
}

.slider-wrapper {
  overflow: hidden;
  max-width: 1200px;
  margin: 0 70px 55px;
}

.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(0, 0, 0, 0.315);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.card-list .card-item .user-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 40px;
  border: 3px solid #fff;
  padding: 4px;
}

.card-list .card-item .skill {
  font-size: 1.15rem;
  color: #e3e3e3;
  font-weight: 500;
  margin: 14px 0 40px;
}

.card-list .card-item .btn {
  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;
}

.card-list .card-item .btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #fff;
  color: #fff;
}

.slider-wrapper .swiper-pagination-bullet {
  background: #fff;
  height: 13px;
  width: 13px;
  opacity: 0.5;
}

.slider-wrapper .swiper-pagination-bullet-active {
  opacity: 1;
}

.slider-wrapper .swiper-slide-button {
  color: #fff;
  margin-top: -55px;
  transition: 0.2s ease;
}

.slider-wrapper .swiper-slide-button:hover {
  color: #4658ff;
}

@media (max-width: 768px) {
  .slider-wrapper {
    margin: 0 10px 40px;
  }

  .slider-wrapper .swiper-slide-button {
    display: none;
  }
}

4. JavaScript Initialization (SwiperJS):
  • SwiperJS Setup: In the script.js file, SwiperJS is initialized to create a looped, touch-enabled slider. The breakpoints option adjusts the number of slides visible at different screen sizes.
  • Pagination and Navigation: SwiperJS automatically adds pagination bullets and navigation arrows to allow the user to navigate between the cards.
const swiper = new Swiper('.slider-wrapper', {
        loop: true,
        grabCursor: true,
        spaceBetween: 30,

        // Pagination bullets
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            dynamicBullets: true
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // Responsive breakpoints
        breakpoints: {
            0: {
                slidesPerView: 1
            },
            768: {
                slidesPerView: 2
            },
            1024: {
                slidesPerView: 3
            }
        }
    });

5. Responsive Design and User Interaction:
  • The SwiperJS configuration ensures that the card slider is responsive, displaying a different number of cards depending on the screen size.
  • It also includes smooth transition effects and easy navigation using either the pagination or the navigation arrows.

Conclusion:

By following this tutorial, you can easily create a responsive card slider with a glassmorphism effect using HTML, CSS, and JavaScript. You can further customize the cards, animations, and responsiveness according to your needs.

Comments

Post a Comment

Popular posts from this blog

Lets build a Markdown blog using Next.js, Shadcn, Tailwind, Pieces, Remark & Rehype 🔥

 Building a Markdown blog using **Next.js**, **Shadcn**, **Tailwind CSS**, **Pieces**, **Remark**, and **Rehype** is a fantastic idea! This stack will give you a modern, performant, and highly customizable blog. Let’s break it down step by step. --- ### **1. Set Up Next.js Project** Start by creating a new Next.js project: ```bash npx create-next-app@latest my-markdown-blog cd my-markdown-blog ``` --- ### **2. Install Tailwind CSS** Install Tailwind CSS and configure it: ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` Update `tailwind.config.js`: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = {   content: [     "./app/**/*.{js,ts,jsx,tsx}",     "./pages/**/*.{js,ts,jsx,tsx}",     "./components/**/*.{js,ts,jsx,tsx}",   ],   theme: {     extend: {},   },   plugins: [], }; ``` Add Tailwind to your `globals.css`: ```css @tailwind base; @tailwind components; @...
Read more

React Portflio Website Basic to Advance

To build a React-based portfolio website with Tailwind CSS, follow these steps to integrate Tailwind and style your components. 1. Set Up Tailwind CSS in Your React Project First, create a new React project and install Tailwind CSS.   npx create-react-app portfolio-website  cd portfolio-website  npm install -D tailwindcss postcss autoprefixer  npx tailwindcss init After running ,    npx tailwindcss init   a    tailwind.config.js  file will be created. Now, configure Tailwind to purge unused styles by editing tailwind.config.js as follows: tailwind.config.js /** @type {import('tailwindcss').Config} */ module . exports = {   content : [     " ./src/**/*.{js,jsx,ts,tsx} " ,   ],   theme : {     extend : {},   },   plugins : [], } 2. Add Tailwind Directives to CSS Create a new file  src / index .css   (or edit the existing one) to include the Tailwind directives: sr...
Read more

Todo List app using html,js and tailwind.css with features login,logout,storing the data in localstorage addtodos,deletetodos and updating todos,toastify library and many more

Image
  Here's a fully functional To-Do List app with login/logout functionality, item management (add, edit, delete), and local storage for data persistence. The app uses HTML, CSS (with Tailwind CSS for design), and JavaScript for the logic. File Structure: index.html - The main structure of the app style.css - Custom styles (if needed) script.js - JavaScript logic for the app You can use Tailwind CSS CDN for simplicity to quickly apply beautiful styles. Features Breakdown: Login/Logout : The user can log in by entering a username and password. After logging in, they can manage their to-do list. If not logged in, they are redirected to the login screen. To-Do Management : The user can add, edit, and delete items from the to-do list. Local Storage : All data is stored in the browser's local storage, so the data persists even after the page is refreshed. Tailwind CSS : The app uses Tailwind CSS to create a clean, responsive, and modern design. You can run this code by creating th...
Read more