DocsAllOver Carousel Component with Bootstrap 4 and Owl Carousel Snippets

Carousel Component with Bootstrap 4 and Owl Carousel

Oct. 25, 2024

Bootstrap, Bootstrap 4, Responsive, Card, Clean UI, Carousel, Owl Carousel

Full Screen

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>Carousel Component with Bootstrap 4 and Owl Carousel</title>
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css'>
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div id="news-slider" class="owl-carousel">
                    <div class="post-slide">
                        <div class="post-img">
                            <img src="https://images.unsplash.com/photo-1596265371388-43edbaadab94?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=301&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=501"
                                alt="">
                            <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title">
                                <a href="#">Lorem ipsum dolor sit amet.</a>
                            </h3>
                            <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque
                                quae tempora......</p>
                            <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
                            <a href="#" class="read-more">read more</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <img src="https://images.unsplash.com/photo-1533227268428-f9ed0900fb3b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=303&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=503"
                                alt="">
                            <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title">
                                <a href="#">Lorem ipsum dolor sit amet.</a>
                            </h3>
                            <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque
                                quae tempora......</p>
                            <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
                            <a href="#" class="read-more">read more</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <img src="https://images.unsplash.com/photo-1564979268369-42032c5ca998?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500"
                                alt="">
                            <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title">
                                <a href="#">Lorem ipsum dolor sit amet.</a>
                            </h3>
                            <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque
                                quae tempora......</p>
                            <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
                            <a href="#" class="read-more">read more</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <img src="https://images.unsplash.com/photo-1576659531892-0f4991fca82b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=301&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=501"
                                alt="">
                            <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title">
                                <a href="#">Lorem ipsum dolor sit amet.</a>
                            </h3>
                            <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque
                                quae tempora......</p>
                            <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
                            <a href="#" class="read-more">read more</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <img src="https://images.unsplash.com/photo-1586083702768-190ae093d34d?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=305&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=505"
                                alt="">
                            <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title">
                                <a href="#">Lorem ipsum dolor sit amet.</a>
                            </h3>
                            <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque
                                quae tempora......</p>
                            <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
                            <a href="#" class="read-more">read more</a>
                        </div>
                    </div>

                    <div class="post-slide">
                        <div class="post-img">
                            <img src="https://images.unsplash.com/photo-1484656551321-a1161420a2a0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=306&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=506"
                                alt="">
                            <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title">
                                <a href="#">Lorem ipsum dolor sit amet.</a>
                            </h3>
                            <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque
                                quae tempora......</p>
                            <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
                            <a href="#" class="read-more">read more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
    <script src='https://code.jquery.com/jquery-1.12.0.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
</body>

</html>

body {
    background-color: #f1f6ff;
}

#news-slider {
    margin-top: 80px;
}

.post-slide {
    background: #fff;
    margin: 20px 15px 20px;
    border-radius: 15px;
    padding-top: 1px;
    box-shadow: 0px 14px 22px -9px #bbcbd8;
}

.post-slide .post-img {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
	margin-bottom: 10px;
}

.post-slide .post-img img {
    width: 100%;
    height: auto;
    transform: scale(1, 1);
    transition: transform 0.2s linear;
}

.post-slide:hover .post-img img {
    transform: scale(1.1, 1.1);
}

.post-slide .over-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background: linear-gradient(-45deg, rgba(6, 190, 244, 0.75) 0%, rgba(45, 112, 253, 0.6) 100%);
    transition: all 0.50s linear;
}

.post-slide:hover .over-layer {
    opacity: 1;
    text-decoration: none;
}

.post-slide .over-layer i {
    position: relative;
    top: 45%;
    text-align: center;
    display: block;
    color: #fff;
    font-size: 25px;
}

.post-slide .post-content {
    background: #fff;
    padding: 2px 20px 40px;
    border-radius: 15px;
}

.post-slide .post-title a {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    display: inline-block;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
}

.post-slide .post-title a:hover {
    text-decoration: none;
    color: #3498db;
}

.post-slide .post-description {
    line-height: 24px;
    color: #808080;
    margin-bottom: 25px;
}

.post-slide .post-date {
    color: #a9a9a9;
    font-size: 14px;
}

.post-slide .post-date i {
    font-size: 20px;
    margin-right: 8px;
    color: #CFDACE;
}

.post-slide .read-more {
    padding: 7px 20px;
    float: right;
    font-size: 12px;
    background: #2196F3;
    color: #ffffff;
    box-shadow: 0px 10px 20px -10px #1376c5;
    border-radius: 25px;
    text-transform: uppercase;
}

.post-slide .read-more:hover {
    background: #3498db;
    text-decoration: none;
    color: #fff;
}

.owl-controls .owl-buttons {
    text-align: center;
    margin-top: 20px;
}

.owl-controls .owl-buttons .owl-prev {
    background: #fff;
    position: absolute;
    top: -13%;
    left: 15px;
    padding: 0 18px 0 15px;
    border-radius: 50px;
    box-shadow: 3px 14px 25px -10px #92b4d0;
    transition: background 0.5s ease 0s;
}

.owl-controls .owl-buttons .owl-next {
    background: #fff;
    position: absolute;
    top: -13%;
    right: 15px;
    padding: 0 15px 0 18px;
    border-radius: 50px;
    box-shadow: -3px 14px 25px -10px #92b4d0;
    transition: background 0.5s ease 0s;
}

.owl-controls .owl-buttons .owl-prev:after,
.owl-controls .owl-buttons .owl-next:after {
    content: "\f104";
    font-family: FontAwesome;
    color: #333;
    font-size: 30px;
}

.owl-controls .owl-buttons .owl-next:after {
    content: "\f105";
}

@media only screen and (max-width:1280px) {
    .post-slide .post-content {
        padding: 0px 15px 25px 15px;
    }
}

$(document).ready(function () {
    $("#news-slider").owlCarousel({
        items: 3,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [980, 2],
        itemsMobile: [600, 1],
        navigation: true,
        navigationText: ["", ""],
        pagination: true,
        autoPlay: true
    });

});

This snippet showcases a visually appealing and interactive carousel component created using Bootstrap 4 and the Owl Carousel library. The carousel allows users to easily navigate through a series of images or content slides, making it ideal for showcasing product highlights, testimonials, or other visual content.

Key Features:

Responsive Design: The carousel adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.
Customizable Styling: Easily modify the appearance of the carousel using Bootstrap's CSS classes and Owl Carousel's configuration options to match your website's design and branding.
Smooth Animations: The carousel incorporates smooth animation effects, providing a seamless transition between slides.
Navigation Controls: Clear navigation controls (arrows or dots) allow users to easily move between slides.
Auto-Play Functionality: The carousel can be configured to automatically cycle through the slides, enhancing user engagement.

Implementation:

Include Bootstrap 4 and Owl Carousel: Ensure you have Bootstrap 4 and the Owl Carousel library installed and configured in your project.
Create the HTML Structure: Set up the basic HTML structure for the carousel, including the container, carousel items, and navigation controls.
Apply Bootstrap and Owl Carousel Classes: Use Bootstrap's CSS classes to style the overall layout and Owl Carousel's specific classes to configure the carousel behavior and appearance.
Initialize Owl Carousel: Use JavaScript to initialize the Owl Carousel instance, passing necessary configuration options to control the carousel's behavior, such as the number of items to show, autoplay speed, and navigation controls.

By following these steps, you can create a visually appealing and interactive carousel component that enhances the user experience on your website.

Latest Snippets

View All