Fatal编程技术网
  • javascript/
  • Javascript 使用Owl旋转木马的快速响应滑块，用于查看

Javascript 使用Owl旋转木马的快速响应滑块，用于查看

javascript html css

Javascript 使用Owl旋转木马的快速响应滑块，用于查看,javascript,html,css,owl-carousel,Javascript,Html,Css,Owl Carousel,所以我试着用猫头鹰制作resposive滑块，但我不确定它是如何工作的（我知道slick也可以做同样的事情）。现在的情况是这样的： 我想每5秒制作一张评论幻灯片，但由于某些原因，评论没有显示出来： 如果有什么更方便的方法来解决这个问题，请您指导我，这是我的代码： <section id="cta-2" class="section-padding"> <div class="container&quo

所以我试着用猫头鹰制作resposive滑块，但我不确定它是如何工作的（我知道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>
使用slick时，会发生以下情况：
任何帮助/提示都很好，提前谢谢：D我认为您需要使用响应代码：

$('.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
        }
    }
})
您可以在这里看到一些示例：

关于

在我测试的一页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中没有为owl转盘使用正确的类名。另外，我怀疑你的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>


我是一个普通人。Lokacija ješpicoka i Uposlnici su rega。Znači sve samo上衣。

-约翰·威克

我是一个普通人。Lokacija ješpicoka i Uposlnici su rega。Znači sve samo上衣。

-约翰·威克

我是一个普通人。Lokacija ješpicoka i Uposlnici su rega。Znači sve samo上衣。

-约翰·威克
脚本代码：

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


$（'.owl carousel'）。owl carousel({
循环：对，
差额：10，
导航：是的，
响应：{
0:{
项目：1
},
600:{
项目：1
},
1000:{
项目：1
}
}
})
工作js FIDLE:

好的，所以它不工作的问题是因为我有两个互相干扰的JQuery文件。修复了问题，谢谢大家的帮助：）

这是否回答了您的问题？一点也不，没有人回答说它仍然不起作用/它唯一的空白不起作用，因为你在里面使用标签引导，你使用col-md-5等等，你需要删除它，只使用owl代码。试着看看这个如何编写的源代码：为什么它不能与bootstrap一起工作它没有意义，因为使用来自Owl的js，每个断点都需要隐藏项目，这是bootstrap无法做到的。我已经删除了class=“item”所在的所有引导，但它仍然没有显示。我不确定为什么它仍然没有显示我 
$(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
        }
    }
})

});

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

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