DEV Community

Cover image for Custom Card Slider Using HTML, CSS, Javascript, and Owl Carousel Plugin
Ashutosh Tiwari
Ashutosh Tiwari

Posted on • Originally published at incoderweb.blogspot.com

Custom Card Slider Using HTML, CSS, Javascript, and Owl Carousel Plugin

#javascript #html #css #incoder

Hello friends, today in this blog you'll learn how to create a custom card slider using HTML, CSS, Javascript, and owl carousel plugin. In our previous blog, we saw how to create a custom video player design using HTML, CSS, and Javascript. Now it's time to create a custom card slider. I've also shared many projects related to Javascript. So don't forget to check here.

What is a card?

A card is an element that is used to show some information or it is also used for presenting the price of some products. Each card is designed to make it easy to read for the user.

You may Like these:-

In this design [Custom Card Slider] Jquery and Owl Carousel Plugin have been used. There are six cards in the middle of the page as you can see in the image above. These cards scroll automatically after two seconds when you hover or touch on any card it will stop scrolling. It also has slide indicators. If you are confused about what am I trying to say, so you can check the code and preview it as well.

Preview is available here.

HTML Code 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Slider Using Owl Carousel Plugin - InCoder</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>

<body>
    <div class="slider-box owl-carousel">
        <div class="card">
            <div class="header">
                <div class="profile-pic" style="background-image: url('https://drive.google.com/uc?id=1o9dJq1sooqIC50CM1443zlH1UkfYS99n&export=view')"></div>
            </div>
            <div class="details">
                <h2>Jhon Deo</h2>
                <p class="profession">Web Developer</p>
                <div class="social">
                    <i class="ri-facebook-circle-fill"></i>
                    <i class="ri-twitter-fill"></i>
                    <i class="ri-instagram-fill"></i>
                    <i class="ri-dribbble-fill"></i>
                </div>
            </div>
            <div class="footer">
                <div class="followings">
                    <p>Following</p>
                    <p class="count">56</p>
                </div>
                <div class="followers">
                    <p>Followers</p>
                    <p class="count">1m</p>
                </div>
                <div class="likes">
                    <p>Likes</p>
                    <p class="count">1k</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="header">
                <div class="profile-pic" style="background-image: url('https://drive.google.com/uc?id=1HeTr5N0ooN4cWp0qxwovNqHnaveqpJ_m&export=view')"></div>
            </div>
            <div class="details">
                <h2>Jazz Martin</h2>
                <p class="profession">Web Designer</p>
                <div class="social">
                    <i class="ri-facebook-circle-fill"></i>
                    <i class="ri-twitter-fill"></i>
                    <i class="ri-instagram-fill"></i>
                    <i class="ri-dribbble-fill"></i>
                </div>
            </div>
            <div class="footer">
                <div class="followings">
                    <p>Following</p>
                    <p class="count">65</p>
                </div>
                <div class="followers">
                    <p>Followers</p>
                    <p class="count">89m</p>
                </div>
                <div class="likes">
                    <p>Likes</p>
                    <p class="count">250k</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="header">
                <div class="profile-pic" style="background-image: url('https://drive.google.com/uc?id=1_Okrc61NNZNaiPr90YI_0JtFvIGZIEtR&export=view')"></div>
            </div>
            <div class="details">
                <h2>Mr. Tarzen</h2>
                <p class="profession">Web Developer</p>
                <div class="social">
                    <i class="ri-facebook-circle-fill"></i>
                    <i class="ri-twitter-fill"></i>
                    <i class="ri-instagram-fill"></i>
                    <i class="ri-dribbble-fill"></i>
                </div>
            </div>
            <div class="footer">
                <div class="followings">
                    <p>Following</p>
                    <p class="count">98</p>
                </div>
                <div class="followers">
                    <p>Followers</p>
                    <p class="count">12m</p>
                </div>
                <div class="likes">
                    <p>Likes</p>
                    <p class="count">0.5k</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="header">
                <div class="profile-pic" style="background-image: url('https://drive.google.com/uc?id=1A9dDQtzE-Tvjo8cCZldB-5ZWC5qlF3aP&export=view')"></div>
            </div>
            <div class="details">
                <h2>Mrs. Tina</h2>
                <p class="profession">Web Developer</p>
                <div class="social">
                    <i class="ri-facebook-circle-fill"></i>
                    <i class="ri-twitter-fill"></i>
                    <i class="ri-instagram-fill"></i>
                    <i class="ri-dribbble-fill"></i>
                </div>
            </div>
            <div class="footer">
                <div class="followings">
                    <p>Following</p>
                    <p class="count">56</p>
                </div>
                <div class="followers">
                    <p>Followers</p>
                    <p class="count">1m</p>
                </div>
                <div class="likes">
                    <p>Likes</p>
                    <p class="count">1k</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="header">
                <div class="profile-pic" style="background-image: url('https://drive.google.com/uc?id=1Dtfa2yjGRdUYuUw-puD8OB9k41UKYTRj&export=view')"></div>
            </div>
            <div class="details">
                <h2>Jhon Deo</h2>
                <p class="profession">Web Developer</p>
                <div class="social">
                    <i class="ri-facebook-circle-fill"></i>
                    <i class="ri-twitter-fill"></i>
                    <i class="ri-instagram-fill"></i>
                    <i class="ri-dribbble-fill"></i>
                </div>
            </div>
            <div class="footer">
                <div class="followings">
                    <p>Following</p>
                    <p class="count">56</p>
                </div>
                <div class="followers">
                    <p>Followers</p>
                    <p class="count">1m</p>
                </div>
                <div class="likes">
                    <p>Likes</p>
                    <p class="count">1k</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="header">
                <div class="profile-pic" style="background-image: url('https://drive.google.com/uc?id=1hzq7Fucb2YOS-G3SsExLqpyTXz-Hs_Wx&export=view')"></div>
            </div>
            <div class="details">
                <h2>Jhon Deo</h2>
                <p class="profession">Web Developer</p>
                <div class="social">
                    <i class="ri-facebook-circle-fill"></i>
                    <i class="ri-twitter-fill"></i>
                    <i class="ri-instagram-fill"></i>
                    <i class="ri-dribbble-fill"></i>
                </div>
            </div>
            <div class="footer">
                <div class="followings">
                    <p>Following</p>
                    <p class="count">56</p>
                </div>
                <div class="followers">
                    <p>Followers</p>
                    <p class="count">1m</p>
                </div>
                <div class="likes">
                    <p>Likes</p>
                    <p class="count">1k</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="script.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
* {
    margin: 0;
    padding: 0;
    font-family: 'Ubuntu', sans-serif;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-box {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

.card {
    max-width: 22rem;
    min-width: 20rem;
    overflow: hidden;
    margin-left: .8rem;
    margin-right: .8rem;
    border-radius: .5rem;
    transition: box-shadow .3s, transform .3s;
    box-shadow: 0 4px 10px 2px rgba(0, 0, 0, .06);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px 2px rgba(0, 0, 0, .06);
}

.card .header .profile-pic {
    width: 100%;
    height: 15rem;
    background-size: 22rem;
    background-repeat: no-repeat;
    transition: border-radius .3s;
    background-position: center -3rem;
}

.card .details {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.card .details h2 {
    font-size: 2rem;
    color: rgb(0 0 0 / 80%);
    margin-top: .4rem;
    letter-spacing: 1px;
}

.card .details .profession {
    margin-bottom: .4rem;
    color: rgb(0 0 0 / 35%);
}

.card .details .social {
    margin-top: .5rem;
}

.card .details .social i {
    cursor: pointer;
    font-size: 1.4rem;
    margin-right: 1rem;
    transition: color .3s;
    color: rgb(0 0 0 / 55%);
}

.card .details .social i:hover {
    color: rgb(0 0 0 / 85%);
}

.card .footer {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

.card .footer div {
    margin-top: 1rem;
    text-align: center;
    margin-left: 1.2rem;
    margin-bottom: 1.2rem;
    padding-right: 1.2rem;
    border-right: 1px solid rgb(0 0 0 / 40%);
}

.card .footer div:first-child {
    margin-left: 1.5rem;
    padding-right: 1.5rem;
}

.card .footer div:last-child {
    border-right: 0;
    padding-right: 1.2rem;
}

.card .footer div .count {
    font-size: 1.8rem;
    font-weight: bold;
    color: rgb(0 0 0 / 80%);
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    height: 30rem;
    padding-top: 5rem;
    -webkit-transform: translate3d(0, 0, 0);
}

.owl-nav {
    display: none;
}

.owl-dots {
    display: flex;
    justify-content: center;
}

.owl-dots .owl-dot {
    width: 1.8rem;
    height: 0.8rem;
    margin-left: 0.5rem;
    border-radius: 50px;
    margin-right: 0.5rem;
    border: 2px solid #000!important;
}

.owl-dots .owl-dot.active {
    transition: all 0.3s;
    background-color: #000;
}

.owl-item.active {
    display: flex;
    justify-content: center;
}

@media (max-width: 375px) {
    .card {
        min-width: 18rem;
    }
}
Enter fullscreen mode Exit fullscreen mode

Javascript Code 

$(document).ready(function() {
    $('.owl-carousel').owlCarousel({
        loop: true,
        nav: true,
        margin: 20,
        autoplay: true,
        autoplayTimeout: 2000,
        autoplayHoverPause: true,
        responsive: {
            320: {
                items: 1
            },
            700: {
                items: 2
            },
            1000: {
                items: 3
            },
            1500: {
                items: 4
            },
            2000: {
                items: 5
            },
            3000: {
                items: 6
            }
        }
    })
});
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

victoriadeveloper profile image

Software Engineering Postmortem: Real-time Chat Microservice

Victoria -

abhinav707 profile image

Building a Scalable Slot Booking System with Redis Distributed Locks

Abhinav -

prince_beec5ccde00b7c6c73 profile image

Logo's designing effect in html css

Prince -

jacobandrewsky profile image

Performant Images with Nuxt Image and Cloudinary

Jakub Andrzejewski -