【问题标题】:Responsive slider for reviews using Owl-Carousel使用 Owl-Carousel 进行评论的响应式滑块
【发布时间】:2020-12-30 17:49:07
【问题描述】:

所以我尝试使用 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 时会发生这种情况: 任何帮助/提示都会很棒,在此先感谢 :D

光滑的代码:

<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
    });
});

任何帮助/提示都会很棒,在此先感谢 :)

【问题讨论】:

标签: javascript html css owl-carousel


【解决方案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

问候

【讨论】:

  • 遗憾的是它仍然无法正常工作/它只是空白
  • 不起作用,因为您使用内部的标签引导程序,使用 col-md-5 等,您需要删除并仅使用 owl 代码。尝试查看此方法的源代码:owlcarousel2.github.io/OwlCarousel2/demos/responsive.html
  • 为什么它不能与引导程序一起使用它没有意义
  • 因为使用 Owl 的 js 每个断点,都需要隐藏项目,这是 bootstrap 无法做到的
  • 我已经删除了 class="item" 所在的所有引导程序,但它仍然没有显示
【解决方案2】:

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

对于你的猫头鹰旋转木马,试试这个

您的 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 小提琴:https://jsfiddle.net/Vaulient/k25jLqme/1/

【讨论】:

    【解决方案3】:

    在我测试过的一页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
            }
        }
    })
    
    });
    

    【讨论】:

    • 不确定为什么它仍然没有显示我
    【解决方案4】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-01-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-05-25
      • 2018-09-04
      相关资源
      最近更新 更多