使用 Owl-Carousel 的响应式评论滑块

Question

所以我尝试使用 owl 制作响应滑块，但我不确定它是如何工作的（我知道 slick 可以做同样的事情）。这是现在的样子：

我想每 5 秒制作一次评论幻灯片，但由于某些原因评论没有显示：

如果有任何更方便的方法解决这个问题，你能指导我吗，这是我这部分的代码：

<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>

这是 JS:

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

使用 slick 时会发生这种情况：任何 help/tip 都会很棒，提前致谢 :D <3

光滑代码：

<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>

和 JS:

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

任何 help/tip 都很好，提前致谢:)

Answer 1

我认为你需要使用响应式代码：

$('.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
        }
    }
})

你可以在这里看到一些例子：

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

此致

Answer 2

在一页中单独尝试此代码html我测试过并且工作正常：

<!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>

在主 js 中我有这个：

$(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
        }
    }
})

});

Answer 3

您没有在 JS 中为 owl 轮播使用正确的类名。我也怀疑你的 css/js 文件是否正确包含。

对于您的 owl 轮播，试试这个

header 你的 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代码：

<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 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>

工作 js fiddle: https://jsfiddle.net/Vaulient/k25jLqme/1/

Answer 4

好的，所以它不起作用的问题是因为我有 2 个 JQuery 文件相互干扰。问题已解决，谢谢大家的帮助:)

使用 Owl-Carousel 的响应式评论滑块

Responsive slider for reviews using Owl-Carousel

javascript

html

css

owl-carousel