Create Responsive Card Slider in HTML CSS & JavaScript | SwiperJs

Introduction: In the realm of web development, the creation of dynamic and visually captivating components is paramount to engaging users and enhancing their browsing experience. One such element that has become ubiquitous across websites is the image slider. Image sliders, also known as carousels or slideshows, provide a dynamic way to showcase images or visual content in a captivating and interactive manner. Leveraging a combination of HTML, CSS, and JavaScript, along with popular libraries like SwiperJs, developers can seamlessly integrate image sliders into their web projects, catering to a wide range of design needs and user preferences.

Why Image Sliders Matter: Image sliders serve as versatile tools for presenting visual content in an engaging and organized manner. Whether used to showcase product images on an e-commerce website, highlight portfolio pieces on a creative portfolio site, or display news articles on a media platform, image sliders offer a dynamic and attention-grabbing way to capture users' interest and convey information effectively. By leveraging captivating visuals and intuitive navigation controls, image sliders enhance the overall user experience, encouraging users to explore content further and stay engaged with the website. Key Components of an Image Slider: 1. HTML Structure: The foundation of an image slider lies in its HTML structure, which typically consists of container elements for the slider itself, individual slides, navigation controls (such as arrows or pagination dots), and optional captions or additional content overlays. By structuring the HTML markup in a semantically meaningful way, developers can ensure accessibility and compatibility across various devices and screen readers. 2. CSS Styling: CSS plays a crucial role in defining the visual appearance and layout of the image slider. Through CSS styling, developers can customize aspects such as slide dimensions, transition effects, navigation controls' positioning and styling, and overall aesthetics to align with the website's design language and branding. Additionally, CSS techniques like media queries enable responsiveness, ensuring the image slider adapts seamlessly to different screen sizes and devices. 3. JavaScript Functionality: JavaScript is responsible for adding interactivity and functionality to the image slider. With JavaScript, developers can implement features such as automatic slideshow transitions, smooth slide animations, swipe gestures for touch-enabled devices, keyboard navigation, and dynamic content loading. Libraries like SwiperJs provide pre-built components and APIs that streamline the implementation of these features, reducing development time and complexity. 4. Image Optimization: Optimizing images for the slider is essential to ensure fast loading times and optimal performance. Developers should resize and compress images appropriately to minimize file size without compromising quality, thereby enhancing the overall user experience and reducing bandwidth usage.

Benefits of Using SwiperJs for Image Sliders: SwiperJs is a popular and versatile JavaScript library for creating responsive and touch-enabled sliders, including image sliders. It offers a wide range of customizable options and configurations, making it suitable for various design requirements and project needs. Some key benefits of using SwiperJs for image sliders include: 1. Ease of Use: SwiperJs simplifies the process of creating image sliders by providing a comprehensive set of APIs and pre-built components that developers can easily integrate into their projects. Its intuitive syntax and documentation make it accessible to developers of all skill levels, from beginners to experienced professionals. 2. Responsive Design: SwiperJs supports responsive design out of the box, allowing image sliders to adapt seamlessly to different screen sizes and orientations. Developers can define breakpoints, customize slide layouts, and adjust navigation controls' behavior to ensure optimal user experience across desktops, tablets, and smartphones. 3. Touch Support: SwiperJs offers native support for touch gestures, making image sliders accessible and intuitive on touch-enabled devices. Users can swipe left or right to navigate between slides, enhancing usability and engagement, particularly on mobile devices. 4. Rich Feature Set: SwiperJs provides a rich feature set, including support for multiple slide types (such as images, videos, and custom content), pagination, navigation controls, autoplay, looped slideshows, lazy loading, and parallax effects. Developers can leverage these features to create dynamic and interactive image sliders that captivate users' attention and convey information effectively. 5. Customization Options: SwiperJs offers extensive customization options, allowing developers to fine-tune every aspect of the image slider's appearance and behavior. From slide transitions and animation effects to navigation styles and autoplay settings, developers can tailor the slider's look and feel to match their project's design requirements and branding guidelines.

Create an index.html file. The file name must be index and its extension .html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <link  rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>

    <title>Movie Card Slider</title>

</head>

<body>

<section>

        <div class="content">

          <div class="info">

            <p>Come and be part of our fantastic <span class="movie-night">movie night</span>, where the air is filled with anticipation and the aroma of freshly popped popcorn. Join us as we immerse ourselves in captivating tales on the silver screen, surrounded by the warmth of friends and the excitement of shared experiences. From laughter to suspense, embark on a cinematic journey that promises to enchant and delight. Bring your enthusiasm, grab a seat, and let's create unforgettable memories together as we indulge in a night brimming with entertainment and much more.</p>

            <button class="btn">Join</button>

        </div>

          <div class="swiper">

            <div class="swiper-wrapper">

             

              <div class="swiper-slide">

                <span>9.5</span>

                <h2>Game of Thrones</h2>

              </div>

     

              <div class="swiper-slide">

                <span>9.5</span>

                <h2>Breaking Bad</h2>

              </div>

     

              <div class="swiper-slide">

                <span>8.1</span>

                <h2>The Queen's Gambit</h2>

              </div>

     

              <div class="swiper-slide">

                <span>8.7</span>

                <h2>Wednesday</h2>

            </div>

             

            <div class="swiper-slide">

                <span>8.6</span>

                <h2>Stranger Things</h2>

            </div>

             

            <div class="swiper-slide">

                <span>8.9</span>

                <h2>Anne with an E</h2>

            </div>

             

             <div class="swiper-slide">

                <span>8.6</span>

                <h2>Friends</h2>

            </div>

          </div>

        </div>

     

      </div>

       

        <ul class="circles">

          <li></li>

          <li></li>

          <li></li>

          <li></li>

          <li></li>

          <li></li>

          <li></li>

          <li></li>

          <li></li>

          <li></li>

        </ul>

    </section>

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

    <script src="script.js"></script>

</body>

</html>

Create a style.css file. The file name must be style and its extension .css

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;600&family=Lemon&family=Patua+One&family=Poppins:wght@200;400;500;600;700;800&display=swap');

*{

    margin: 0;

    padding: 0;

    font-family: "Poppins", sans-serif;

}

section{

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: #262626;

    min-height: 100vh;

    overflow: hidden;

}

.content{

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    gap: 30px;

    background:linear-gradient(100deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);

    border-radius: 20px;

    backdrop-filter: blur(30px);

    width: min(900px, 100%);

    box-shadow: 0 0.5px 0 1px rgba(255,255,255,0.2) inset, 0 1px  0 0 rgba(255,255,255, 0.65) inset, 0 4px16px rgba(0,0,0,0.1);

    z-index: 10;

}

.info{

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    max-width: 450px;

    padding: 0 35px;

    text-align: justify;

}

.info p{

    color: white;

    font-weight: 500;

    font-size: 1rem;

    margin-bottom: 20px;

    line-height: 1.5;

}

.movie-night{

    background:linear-gradient(225deg, #ff3cac 0%, #7B4ba0 50%) ;

}

.btn{

    display: block;

    padding: 10px 40px;

    margin: 10px auto;

    font-size: 1.1rem;

    font-weight: 700;

    border-radius: 4px;

    outline: none;

    text-decoration: none;

    color: #784ba0;

    background: rgba(255,255,255,0.9);

    box-shadow: 0 6px 30px rgba(0,0,0,0.1);

    border: 1px solid rgba(255,255,255,0.3);

    cursor: pointer;

}

.btn:hover , .btn:focus, .btn:active, .btn:visited{

    transition-timing-function: cubic-bezier(0.6,4,0.3,0.8);

    animation: animate 0.5s 1;

}

@keyframes animate{

    0%, 100%{

        transform: scale(1.1);

    }

    25%{

        transform: scale(0.9, 1.1);

    }

   

    50%{

        transform: scale(1.1, 0.9);

    }

    75%{

        transform: scale(0.95, 1.05);

    }

}

.swiper{

    width: 250px;

    height: 450px;

    padding: 50px 0;

}

.swiper-slide{

    position: relative;

    box-shadow: 0 15px 50px rgba(0,0,0,0.2);

    border-radius: 10px;

}

.swiper-slide span{

    position: absolute;

    top: 0;

    right:0;

    color: white;

    padding: 7px 18px;

    margin: 10px;

    border-radius: 20px;

    letter-spacing: 2px;

    font-size: 0.8rem;

    font-weight: 400;

    background: rgba(255,255,255,0);

    box-shadow: inset 1px -2px 20px rgba(214,214,214,0.17), inset -3px 3px 3px rgba(255,255,255,0.41);

    backdrop-filter: blur(75px);

}

.swiper-slide h2{

    position: absolute;

    bottom: 0;

    left: 0;

    color: white;

    font-weight: 400;

    font-size: 1.1rem;

    line-height: 1.4;

    margin: 0 0 20px 20px;

}

.swiper-slide:nth-child(1n){

    background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url(images/1.jpg) no-repeat 50% 50% / cover;

}

.swiper-slide:nth-child(2n){

    background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url(images/2.jpg) no-repeat 50% 50% / cover;

}

.swiper-slide:nth-child(3n){

    background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url(images/3.jpg) no-repeat 50% 50% / cover;

}

.swiper-slide:nth-child(4n){

    background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url(images/4.jpg) no-repeat 50% 50% / cover;

}

.swiper-slide:nth-child(5n){

    background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url(images/5.jpg) no-repeat 50% 50% / cover;

}

.swiper-slide:nth-child(6n){

    background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url(images/6.jpg) no-repeat 50% 50% / cover;

}

.swiper-slide:nth-child(7n){

    background: linear-gradient(to top, #0f2027, #203a4300, #2c536400), url(images/7.jpg) no-repeat 50% 50% / cover;

}

.circles{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

}

.circles li{

    position: absolute;

    display: block;

    list-style: none;

    width: 20px;

    height: 20px;

    background: #ff3cac;

    background-image: linear-gradient(225deg, #ff3cac 0%, #784ba0 50%, #2b86c5 100%);

    animation: animate2 25s linear infinite;

    bottom: -150px;  

}

.circles li:nth-child(1){

    left: 25%;

    width: 80px;

    height: 80px;

    animation-delay: 0;

}

.circles li:nth-child(2){

    left: 10%;

    width: 20px;

    height: 20px;

    animation-delay: 2s;

    animation-duration: 12s;

}

.circles li:nth-child(3){

    left: 70%;

    width: 20px;

    height: 20px;

    animation-delay: 4s;

}

.circles li:nth-child(4){

    left: 40%;

    width: 60px;

    height: 60px;

    animation-delay: 0;

    animation-duration: 18s;

}

.circles li:nth-child(5){

    left: 65%;

    width: 20px;

    height: 20px;

    animation-delay: 0;

}

.circles li:nth-child(6){

    left: 75%;

    width: 110px;

    height: 110px;

    animation-delay: 3s;

}

.circles li:nth-child(7){

    left: 35%;

    width: 150px;

    height: 150px;

    animation-delay: 7s;

}

.circles li:nth-child(8){

    left: 50%;

    width: 25px;

    height: 25px;

    animation-delay: 15s;

    animation-duration: 45s;

}

.circles li:nth-child(9){

    left: 20%;

    width: 15px;

    height: 15px;

    animation-delay: 2s;

    animation-duration: 35s;

}

.circles li:nth-child(10){

    left: 85%;

    width: 150px;

    height: 150px;

    animation-delay: 0;

    animation-duration: 11s;

}

@keyframes animate2{

    0%{

        transform: translateY(0) rotate(0deg);

        opacity: 1;

        border-radius: 0;

    }

    100%{

        transform: translateY(-100px) rotate(720deg);

        opacity: 0;

        border-radius: 50%;

    }

}

@media (max-width:750px){

    .content{

        flex-direction: column-reverse;

    }

    .btn{

        margin: 10px auto 40px;

    }

}

And at last some javascript as well

var swiper = new Swiper(".swiper", {

    effect:"cards",

    grabCursor:true,

    initialSlide:2,

    loop:true,

    rotate:true,

    mousewheels:{

        invert:false,

    }

})

Conclusion: Incorporating SwiperJs into HTML, CSS, and JavaScript enables developers to create visually stunning and highly functional image sliders that enhance user engagement and elevate the overall website experience. By leveraging customizable options, responsive design principles, and touch support, SwiperJs empowers developers to build image sliders that seamlessly adapt to various devices and captivate users across different browsing contexts. Whether used to showcase products, highlight portfolio work, or display informative content, image sliders play a crucial role in conveying information effectively and enticing users to explore further. With SwiperJs, developers have a powerful toolkit at their disposal for creating captivating image sliders that leave a lasting impression on website visitors.