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

tobidelly profile image

Car Dashboard Monitor Interface

TD! -

rawas_aditya profile image

Understanding the Barrel Pattern in JavaScript/TypeScript

Aditya Rawas -

abhay_yt_52a8e72b213be229 profile image

Unlocking the Power of Web Components and Custom Elements for Reusable UI Design

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Why TypeScript is the Future of JavaScript Development: Benefits and Adoption

Abhay Singh Kathayat -