Get started with owl-carousel CDN

MIT licensed

Owl Carousel is a popular JS plugin for creating responsive and touch-friendly slideshows.

Tags:
  • carousel
  • jquery
  • slider

Stable version

Copied!

How to start using owl-carousel CDN


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    <script src="https://cdn.cdnhub.io/owl-carousel/1.3.3/owl.carousel.min.js"></script>
    <style>
        .owl-carousel {
            width: 100%;
            margin: 0 auto;
        }
        .owl-item {
            text-align: center;
            background-color: #f4f4f4;
            padding: 20px;
            border: 1px solid #e5e5e5;
        }
        .owl-item img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-5">Owl Carousel Example</h1>
        <div class="owl-carousel owl-theme" id="owl-example">
            <div class="owl-stage-outer">
                <div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0.25s ease 0s; width: 3200px;">
                    <div class="owl-items">
                        <div class="owl-item cloned" style="width: 320px; margin-right: 30px;">
                            <img src="image1.jpg" class="img-fluid">
                        </div>
                        <div class="owl-item cloned" style="width: 320px; margin-right: 30px;">
                            <img src="image2.jpg" class="img-fluid">
                        </div>
                        <div class="owl-item cloned" style="width: 320px; margin-right: 30px;">
                            <img src="image3.jpg" class="img-fluid">
                        </div>
                        <!-- Add more items here -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $("#owl-example").owlCarousel({
                items: 3,
                loop: true,
                margin: 30,
                autoplay: true,
                autoplayTimeout: 2000,
                autoplayHoverPause: true
            });
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions