Creating Stunning Card Effects with Swiper.js

Web design often involves captivating visuals that engage users and enhance the overall user experience. In this tutorial, we’ll explore how to create mesmerizing card effects using the Swiper.js plugin. This simple yet powerful JavaScript library allows us to implement a sleek and dynamic card slider effortlessly.

HTML Structure

Let’s begin with the HTML structure. We’ve created a section with a container div that holds the Swiper.js slider. Each slide represents a card with a unique location name.

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 
    add your css link here
    Meta tags and title 
    -->
</head>

<body>
    <section class="card_effect-section">
        <div class="container">
            <swiper-container class="slider" effect="cards" grab-cursor="true">
                <swiper-slide><span>Lakkatura Tea Garden</span></swiper-slide>
                <swiper-slide><span>Bandarban Hill Resort</span></swiper-slide>
                <!-- ... (additional slides) ... -->
            </swiper-container>
        </div>
    </section>

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

</html>

CSS Styling

Now, let’s dive into the CSS styling. We’ve set up a beautiful radial gradient background and defined styles for the card container and individual slides.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');

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

body {
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(0, 221, 214, 1) 0%, rgba(51, 102, 255, 1) 90%);
}

.card_effect-section {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.card_effect-section .container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;


}

.card_effect-section .container swiper-container {
    width: 260px;
    height: 330px;

}

swiper-container swiper-slide {
    /* background: rebeccapurple; */
    border-radius: 15px;
    text-align: center;
    padding-top: 200px;
}

swiper-container swiper-slide span {
    /* margin-top: 120px; */
    font-size: 18px;
    padding: 7px 12px;
    background: #000;
    text-align: center;
    border-radius: 30px;
    color: #fff;
}

swiper-container swiper-slide:nth-child(1n) {
    background-image: url(img/1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

swiper-container swiper-slide:nth-child(2n) {
    background-image: url(img/2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

swiper-container swiper-slide:nth-child(3n) {
    background-image: url(img/3.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

swiper-container swiper-slide:nth-child(4n) {
    background-image: url(img/4.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

swiper-container swiper-slide:nth-child(5n) {
    background-image: url(img/5.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

swiper-container swiper-slide:nth-child(6n) {
    background-image: url(img/6.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

swiper-container swiper-slide:nth-child(7n) {
    background-image: url(img/7.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

Understanding the Styles

    • Common Styles:

      • We’ve applied common styles to reset default browser styles and set up a vibrant radial gradient background.
    • Card Container:

      • The container holds our Swiper.js slider, and we’ve centered it on the page with a minimum height to ensure a visually appealing layout.
    • Swiper.js Styles:

      • We’ve defined the container size and common styles for each slide, giving them a consistent look and feel.
    • Background Images:

      • Each slide has a unique background image using the nth-child selector, creating a visually diverse card effect.

Subscribe for updates, exclusive offers, and design tips

Subscription Form
Shopping Cart
Scroll to Top