Welcome to Help center

We are here to help

Owl carousel

Follow

owl-carousel.jpg

HTML head

    <link rel="stylesheet" href="assets/css/owlcarousel/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/owlcarousel/owl.theme.default.min.css">
    

 

HTML:

        <div class="owl-carousel">
            <div class="person-card item">...</div>
            <div class="person-card item">...</div>
            <div class="person-card item">...</div>
            <div class="person-card item">...</div>
            <div class="person-card item">...</div>
        </div>
    

 

Before </body> tag ends:

        <script src="assets/js/owl.carousel.min.js"></script>
        <script src="assets/js/myScript.js"></script>
    

 

Js code located at file assets/js/myScript.js:

    var owl = $('.owl-carousel');

    if (owl.length>0) {

        owl.owlCarousel({
            autoplayHoverPause: true,
            autoplayTimeout: 4000,
            autoplay: true,
            loop: true,
            margin: 30,
            responsive: {
                0: {
                    items: 1
                },
                400: {
                    items: 2
                },
                700: {
                    items: 3
                },
                1000: {
                    items: 4
                }
            }
        });

    }
    

Owl-carousel settings can be found here

Top
Powered by Zendesk