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 p-3">
    <div class="card bg-primary shadow-soft border-light">
        <img src="../../assets/img/team/profile-picture-3.jpg" class="card-img-top rounded-xl p-2" alt="Bonnie portrait">
        <div class="card-body">
            <h2 class="h5 card-title mb-2">Bonnie Green</h2>
            <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" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                        <span class="fab fa-facebook-f"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3">
                        <span class="fab fa-twitter"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                        <span class="fab fa-slack-hash"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3">
                        <span class="fab fa-dribbble"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- Item 2 -->
<div class="item p-3">
    <div class="card bg-primary shadow-soft border-light">
        <img src="../../assets/img/team/profile-picture-1.jpg" class="card-img-top rounded-xl p-2" alt="Neil portrait">
        <div class="card-body">
            <h2 class="h5 card-title mb-2">Neil Sims</h2>
            <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" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                        <span class="fab fa-facebook-f"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3">
                        <span class="fab fa-twitter"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                        <span class="fab fa-slack-hash"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3">
                        <span class="fab fa-dribbble"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- Item 3 -->
<div class="item p-3">
    <div class="card bg-primary shadow-soft border-light">
        <img src="../../assets/img/team/profile-picture-2.jpg" class="card-img-top rounded-xl p-2" alt="Jose portrait">
        <div class="card-body">
            <h2 class="h5 card-title mb-2">Jose Leos</h2>
            <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" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                        <span class="fab fa-facebook-f"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3">
                        <span class="fab fa-twitter"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                        <span class="fab fa-slack-hash"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3">
                        <span class="fab fa-dribbble"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- Item 4 -->
<div class="item p-3">
    <div class="card bg-primary shadow-soft border-light">
        <img src="../../assets/img/team/profile-picture-4.jpg" class="card-img-top rounded-xl p-2" alt="Joseph portrait">
        <div class="card-body">
            <h2 class="h5 card-title mb-2">Joseph Garth</h2>
            <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" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                        <span class="fab fa-facebook-f"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3">
                        <span class="fab fa-twitter"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                        <span class="fab fa-slack-hash"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3">
                        <span class="fab fa-dribbble"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- Item 5 -->
<div class="item p-3">
    <div class="card bg-primary shadow-soft border-light">
        <img src="../../assets/img/team/profile-picture-6.jpg" class="card-img-top rounded-xl p-2" alt="Patricia portrait">
        <div class="card-body">
            <h2 class="h5 card-title mb-2">Patricia Patel</h2>
            <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" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
                        <span class="fab fa-facebook-f"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3">
                        <span class="fab fa-twitter"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
                        <span class="fab fa-slack-hash"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3">
                        <span class="fab fa-dribbble"></span>
                    </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: 2
        }
    },
    navText: [
        '<i class="fas fa-chevron-left"></i>',
        '<i class="fas fa-chevron-right"></i>'
    ]
});

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 p-3">
        <!-- Pricing Card -->
        <div class="card bg-primary shadow-soft border-light text-center">
            <!-- Header -->
            <header class="card-header p-3">
                <h2 class="h5 text-dark 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>
        <!-- End of Pricing Card -->
    </div>
    <!-- Item 2 -->
    <div class="item p-3">
        <!-- Pricing Card -->
        <div class="card bg-primary shadow-soft border-light text-center">
            <!-- Header -->
            <header class="card-header p-3">
                <h2 class="h5 text-dark 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-primary btn-block" tabindex="0">Start
                    Deluxe</button>
            </div>
            <!-- End Content -->
        </div>
        <!-- End of Pricing Card -->
    </div>
    <!-- Item-3 -->
    <div class="item p-3">
        <!-- Pricing Card -->
        <div class="card bg-primary shadow-soft border-light text-center">
            <!-- Header -->
            <header class="card-header p-3">
                <h2 class="h5 text-dark 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>
        <!-- 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: 2
        }
    },
    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.