Owl Carousel

Use these custom styles Owl Carousel examples to create slideshows of elements

Default

Using the following markup and adding the element inside the .item div you can create multiple sliding elements:

<div class="basic-carousel owl-carousel owl-theme">
    <!-- Item 1 -->
    <div class="item">
        <div class="card border-light">
            <img src="../../assets/img/team/profile-picture-3.jpg" class="card-img-top rounded-top" alt="profile-image">
            <div class="card-body">
                <h5 class="card-title mb-2">Bonnie M. Green</h5>
                <span class="card-subtitle text-gray font-weight-normal">Web publications designer</span>
                <p class="card-text my-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <ul class="list-unstyled d-flex mt-3 mb-0">
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
                            <i class="fab fa-slack-hash"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
                            <i class="fab fa-dribbble"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Item 2 -->
    <div class="item">
        <div class="card border-light">
            <img src="../../assets/img/team/profile-picture-1.jpg" class="card-img-top rounded-top" alt="profile-image">
            <div class="card-body">
                <h5 class="card-title mb-2">Neil D. Sims</h5>
                <span class="card-subtitle text-gray font-weight-normal">Web Developer</span>
                <p class="card-text my-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <ul class="list-unstyled d-flex mt-3 mb-0">
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
                            <i class="fab fa-slack-hash"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
                            <i class="fab fa-dribbble"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Item 3 -->
    <div class="item">
        <div class="card border-light">
            <img src="../../assets/img/team/profile-picture-2.jpg" class="card-img-top rounded-top" alt="profile-image">
            <div class="card-body">
                <h5 class="card-title mb-2">Jose D. Leos</h5>
                <span class="card-subtitle text-gray font-weight-normal">React Native Developer</span>
                <p class="card-text my-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <ul class="list-unstyled d-flex mt-3 mb-0">
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
                            <i class="fab fa-slack-hash"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
                            <i class="fab fa-dribbble"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Item 4 -->
    <div class="item">
        <div class="card border-light">
            <img src="../../assets/img/team/profile-picture-4.jpg" class="card-img-top rounded-top" alt="profile-image">
            <div class="card-body">
                <h5 class="card-title mb-2">Joseph A. Garth</h5>
                <span class="card-subtitle text-gray font-weight-normal">Director</span>
                <p class="card-text my-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <ul class="list-unstyled d-flex mt-3 mb-0">
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
                            <i class="fab fa-slack-hash"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
                            <i class="fab fa-dribbble"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Item 5 -->
    <div class="item">
        <div class="card border-light">
            <img src="../../assets/img/team/profile-picture-3.jpg" class="card-img-top rounded-top" alt="profile-image">
            <div class="card-body">
                <h5 class="card-title mb-2">Bonnie M. Green</h5>
                <span class="card-subtitle text-gray font-weight-normal">Web publications designer</span>
                <p class="card-text my-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <ul class="list-unstyled d-flex mt-3 mb-0">
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
                            <i class="fab fa-slack-hash"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
                            <i class="fab fa-dribbble"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Javascript

This is an example of usage for the example above in Javascript:

$('.basic-carousel').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    dots: false,
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 2
        },
        1000: {
            items: 3
        }
    },
    navText: [
        '<i class="fas fa-chevron-left"></i>',
        '<i class="fas fa-chevron-right"></i>'
    ]
});
<div class="mouswheel-carousel owl-carousel owl-theme">
    <!-- Item 1 -->
    <div class="item">
        <!-- Blog Card -->
        <div class="card border-light">
            <img src="../../assets/img/blog/image-1.jpg" class="card-img-top rounded-top" alt="image">
            <div class="card-body">
                <span class="h6 icon-tertiary small"><i class="fas fa-medal mr-2"></i>Awards</span>
                <h5 class="card-title mt-3">We partnered up with Ildiesign</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary btn-sm">Read More</a>
            </div>
        </div>
        <!-- End of Blog Card -->
    </div>
    <!-- Item 2 -->
    <div class="item">
        <!-- Blog Card -->
        <div class="card border-light">
            <img src="../../assets/img/blog/image-2.jpg" class="card-img-top rounded-top" alt="image">
            <div class="card-body">
                <span class="h6 icon-tertiary small"><i class="fas fa-medal mr-2"></i>Awards</span>
                <h5 class="card-title mt-3">We partnered up with Ildiesign</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary btn-sm">Read More</a>
            </div>
        </div>
        <!-- End of Blog Card -->
    </div>
    <!-- Item 3 -->
    <div class="item">
        <!-- Blog Card -->
        <div class="card border-light">
            <img src="../../assets/img/blog/image-3.jpg" class="card-img-top rounded-top" alt="image">
            <div class="card-body">
                <span class="h6 icon-tertiary small"><i class="fas fa-medal mr-2"></i>Awards</span>
                <h5 class="card-title mt-3">We partnered up with Ildiesign</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary btn-sm">Read More</a>
            </div>
        </div>
        <!-- End of Blog Card -->
    </div>
    <!-- Item 4 -->
    <div class="item">
        <!-- Blog Card -->
        <div class="card border-light">
            <img src="../../assets/img/blog/image-1.jpg" class="card-img-top rounded-top" alt="image">
            <div class="card-body">
                <span class="h6 icon-tertiary small"><i class="fas fa-medal mr-2"></i>Awards</span>
                <h5 class="card-title mt-3">We partnered up with Ildiesign</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary btn-sm">Read More</a>
            </div>
        </div>
        <!-- End of Blog Card -->
    </div>
    <!-- Item 5 -->
    <div class="item">
        <!-- Blog Card -->
        <div class="card border-light">
            <img src="../../assets/img/blog/image-2.jpg" class="card-img-top rounded-top" alt="image">
            <div class="card-body">
                <span class="h6 icon-tertiary small"><i class="fas fa-medal mr-2"></i>Awards</span>
                <h5 class="card-title mt-3">We partnered up with Ildiesign</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary btn-sm">Read More</a>
            </div>
        </div>
        <!-- End of Blog Card -->
    </div>
    <!-- Item 6 -->
    <div class="item">
        <!-- Blog Card -->
        <div class="card border-light">
            <img src="../../assets/img/blog/image-3.jpg" class="card-img-top rounded-top" alt="image">
            <div class="card-body">
                <span class="h6 icon-tertiary small"><i class="fas fa-medal mr-2"></i>Awards</span>
                <h5 class="card-title mt-3">We partnered up with Ildiesign</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary btn-sm">Read More</a>
            </div>
        </div>
        <!-- End of Blog Card -->
    </div>
</div>

Javascript

This is an example of usage for the example above in Javascript:

var owl = $('.mouswheel-carousel');
owl.owlCarousel({
    loop: true,
    nav: false,
    margin: 10,
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 1
        },
        960: {
            items: 2
        },
        1200: {
            items: 2
        }
    },
    navText: [
        '<i class="fas fa-long-arrow-alt-left"></i>',
        '<i class="fas fa-long-arrow-alt-right"></i>'
    ]
});
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY > 0) {
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});

Autoplay

Use the following markup example to enable autoplay on the Owl Carousel component:

<div class="autoplay-carousel owl-carousel owl-theme">
    <!-- Item 1 -->
    <div class="item">
        <!-- Pricing Card -->
        <div class="pricing-card">
            <div class="card border-light text-center">
                <!-- Header -->
                <header class="card-header bg-white p-3">
                    <h2 class="h5 text-primary mb-4">Basic</h2>
                    <span class="d-block">
                        <span class="display-1 text-dark font-weight-bold">
                            <span class="align-top font-medium">$</span>19
                    </span>
                    <span class="d-block text-gray font-small">/ month</span>
                    </span>
                </header>
                <!-- End Header -->
                <!-- Content -->
                <div class="card-body">
                    <ul class="list-group mb-4">
                        <li class="list-group-item"><strong>1</strong> free domain</li>
                        <li class="list-group-item">Storage space: <strong>5GB</strong></li>
                        <li class="list-group-item"><strong>100k</strong> monthly visitors</li>
                        <li class="list-group-item">One-click staging site</li>
                        <li class="list-group-item">Search engine wizard </li>
                        <li class="list-group-item">Community support</li>
                    </ul>
                    <button type="button" class="btn btn-primary btn-block" tabindex="0">Start
                        Starter</button>
                </div>
                <!-- End Content -->
            </div>
        </div>
        <!-- End of Pricing Card -->
    </div>
    <!-- Item 2 -->
    <div class="item">
        <!-- Pricing Card -->
        <div class="pricing-card">
            <div class="card border-light text-center">
                <!-- Header -->
                <header class="card-header bg-white p-3">
                    <h2 class="h5 text-secondary mb-4">Deluxe</h2>
                    <span class="d-block">
                        <span class="display-1 text-dark font-weight-bold">
                            <span class="align-top font-medium">$</span>49
                    </span>
                    <span class="d-block text-gray font-small">/ month</span>
                    </span>
                </header>
                <!-- End Header -->
                <!-- Content -->
                <div class="card-body">
                    <ul class="list-group mb-4">
                        <li class="list-group-item"><strong>3</strong> free domain</li>
                        <li class="list-group-item">Storage space: <strong>25GB</strong></li>
                        <li class="list-group-item"><strong>400k</strong> monthly visitors</li>
                        <li class="list-group-item">SSH/SFTP access</li>
                        <li class="list-group-item">Free SSL Certificate </li>
                        <li class="list-group-item">Community support</li>
                    </ul>
                    <button type="button" class="btn btn-secondary btn-block" tabindex="0">Start
                        Deluxe</button>
                </div>
                <!-- End Content -->
            </div>
        </div>
        <!-- End of Pricing Card -->
    </div>
    <!-- Item-3 -->
    <div class="item">
        <!-- Pricing Card -->
        <div class="pricing-card">
            <div class="card border-light text-center">
                <!-- Header -->
                <header class="card-header bg-white p-3">
                    <h2 class="h5 text-tertiary mb-4">Ultimate</h2>
                    <span class="d-block">
                        <span class="display-1 text-dark font-weight-bold">
                            <span class="align-top font-medium">$</span>89
                    </span>
                    <span class="d-block text-gray font-small">/ month</span>
                    </span>
                </header>
                <!-- End Header -->
                <!-- Content -->
                <div class="card-body">
                    <ul class="list-group mb-4">
                        <li class="list-group-item"><strong>5</strong> free domain</li>
                        <li class="list-group-item">Storage space: <strong>50GB</strong></li>
                        <li class="list-group-item"><strong>1m+</strong> monthly visitors</li>
                        <li class="list-group-item">Free site-maintenance </li>
                        <li class="list-group-item"><strong>5-50</strong>websites</li>
                        <li class="list-group-item">Community support+</li>
                    </ul>
                    <button type="button" class="btn btn-tertiary btn-block" tabindex="0">Start
                        Ultimate</button>
                </div>
                <!-- End Content -->
            </div>
        </div>
        <!-- End of Pricing Card -->
    </div>
</div>

Javascript

This is an example of usage for the example above in Javascript:

$('.autoplay-carousel').owlCarousel({
    loop: true,
    margin: 10,
    nav: false,
    items: 3,
    autoplay: true,
    autoplayTimeout: 3000,
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 2
        },
        1000: {
            items: 3
        }
    },
    navText: [
        '<i class="fas fa-long-arrow-alt-left"></i>',
        '<i class="fas fa-long-arrow-alt-right"></i>'
    ]
});

Read more about Owl Carousel from the official plugin website.