Responsive slider for reviews using Owl-Carousel

user_12886858 0
Viewed 825

So I tried making resposive slider using owl but I'm not sure how it works (I know slick can do the same thing). This is how it looks like now: enter image description here

I want to make each review slide every 5 seconds, but for some reason the reviews aren't showing up: enter image description here

if there is any more convenient way to solve this problem could you guide me, this is my code for this part:

<section id="cta-2" class="section-padding">
            <div class="container">
                <div class=" row">
                    <div class="col-md-2"></div>
                    <div class="text-right-md col-md-4 col-sm-4">
                        <h2 class="section-title white lg-line">« Komentari <br> korisnika »</h2>
                    </div>
                    <div class="col-md-4 col-sm-5 owl-carousel owl-theme">
                        <div class="item col-md-4 col-sm-5">
                            Ma meni je odlična ordinacija znaci bajo ono grmi. Lokacija je špicoka i uposlenici su rega. Znači sve samo top.
                            <p class="text-right text-primary"><i>— John Wick</i></p>
                        </div>
                        <div class="item col-md-4 col-sm-5">
                            Ma meni je odlična ordinacija znaci bajo ono grmi. Lokacija je špicoka i uposlenici su rega. Znači sve samo top.
                            <p class="text-right text-primary"><i>— John Wick</i></p>
                        </div>
                        <div class="item col-md-4 col-sm-5">
                            Ma meni je odlična ordinacija znaci bajo ono grmi. Lokacija je špicoka i uposlenici su rega. Znači sve samo top.
                            <p class="text-right text-primary"><i>— John Wick</i></p>
                        </div>
                    </div>
                    <div class="col-md-2"></div>
                </div>
            </div>
        </section>

This is JS:

$(document).ready(function() {
    $(".owl-carousel").owlCarousel({
        dots: false,
        items: 1,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        loop: true
    });
});

When using slick this happens: enter image description here Any help/tip would be great, Thanks in advance :D <3

code for slick:

<div class="komentari row-md-4 row-sm-5">
                        <div class=" col-md-4 col-sm-5">
                            Ma meni je odlična ordinacija znaci bajo ono grmi. Lokacija je špicoka i uposlenici su rega. Znači sve samo top.
                            <p class="text-right text-primary"><i>— John wick</i></p>
                        </div>
                        <div class=" col-md-4 col-sm-5">
                            Ma meni je odlična ordinacija znaci bajo ono grmi. Lokacija je špicoka i uposlenici su rega. Znači sve samo top.
                            <p class="text-right text-primary"><i>— John wick</i></p>
                        </div>
                        <div class=" col-md-4 col-sm-5">
                            Ma meni je odlična ordinacija znaci bajo ono grmi. Lokacija je špicoka i uposlenici su rega. Znači sve samo top.
                            <p class="text-right text-primary"><i>— John wick</i></p>
                        </div>
                    </div>

and JS:

$(document).on('ready', function() {
    $(".komentari").slick({
        dots: false,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 3
    });
});

Any help/tip would be great, Thanks in advance :)

owl-carousel css html javascript
4 Answers

i think you need to use the responsive code:

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})

you can see here some example:

https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

Regards

user_26967670

You're not using the right classname for your owl carousel in your JS. Also I doubt your css/js files are included properly.

for your owl carousel, try this

header for your html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" />     
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" />     
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" />

html code:

<div class="komentari row-md-4 row-sm-5 owl-carousel owl-theme">
       <div class="item">
       <div class=" col-md-4 col-sm-5">
            Ma meni je odlična ordinacija znaci bajo ono grmi. Lokacija je špicoka i uposlenici su rega. Znači sve samo top.
            <p class="text-right text-primary"><i>— John wick</i></p>
        </div>
        </div>
        <div class="item">
       <div class=" col-md-4 col-sm-5">
            Ma meni je odlična ordinacija znaci bajo ono grmi. Lokacija je špicoka i uposlenici su rega. Znači sve samo top.
            <p class="text-right text-primary"><i>— John wick</i></p>
        </div>
        </div>
       <div class="item">
       <div class=" col-md-4 col-sm-5">
            Ma meni je odlična ordinacija znaci bajo ono grmi. Lokacija je špicoka i uposlenici su rega. Znači sve samo top.
            <p class="text-right text-primary"><i>— John wick</i></p>
        </div>
        </div>
</div>

script code:

<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

<script>
    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:1
            },
            1000:{
                items:1
            }
        }
    })

 </script>

working js fiddle: https://jsfiddle.net/Vaulient/k25jLqme/1/

user_111172370

try this code alone in one page html i tested and work good:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keywords" content="affiliate, casinos">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  
  <!--<link href="css/owl.carousel.min.css" rel="stylesheet" />
   <link href="css/owl.theme.default.min.css" rel="stylesheet" />-->

   <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" />     
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.green.min.css" />
    <link href="css/styles.css" rel="stylesheet" />
</head>
<body id="home" class="loaded">

    <div class="owl-carousel owl-theme">
        <div class="item"><h4>1</h4></div>
        <div class="item"><h4>2</h4></div>
        <div class="item"><h4>3</h4></div>
        <div class="item"><h4>4</h4></div>
        <div class="item"><h4>5</h4></div>
        <div class="item"><h4>6</h4></div>
        <div class="item"><h4>7</h4></div>
        <div class="item"><h4>8</h4></div>
        <div class="item"><h4>9</h4></div>
        <div class="item"><h4>10</h4></div>
        <div class="item"><h4>11</h4></div>
        <div class="item"><h4>12</h4></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/main.js"></script>
    </body>
</html>

inside main js i have this:

$(document).ready(function () {


  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})

});
user_26967670

Ok so the problem why it wasn't working is because I had 2 JQuery files which were interfering with each other. Fixed the problem, thank you all for the help :)

user_128868580
Related