Javascript owlcarousel - 点不出现

Question

提问by Tojo Chacko

I am working on a project and as my knowledge in javascript are very limited, I decided to use owlcarousel. everything was working fine but now I am facing a problem.

我正在做一个项目，由于我对 javascript 的了解非常有限，我决定使用owlcarousel. 一切正常，但现在我面临一个问题。

I have set the dots to true but they do not appear. My work so far is the following:

我已将点设置为 true 但它们没有出现。到目前为止，我的工作如下：

.container {
 width: 90%;
 margin: 0 auto;
}

/*Text over image*/
.item {
 width: 100%;
}

.item img {
   display: block;
   max-width:100%;
}


/*Carousel Nav Buttons*/

.carousel-nav-left{
    height: 30px;
    font-size: 30px;
    position: absolute;
    top: 0%;
    bottom: 0%;
    margin: auto 0;
    margin-left: -40px;
}

.carousel-nav-right{
    height: 30px;
    font-size: 30px;
    position: absolute;
    top: 0%;
    bottom: 0%;
 right: 0%;
    margin: auto 0;
    margin-right: -40px;
}


@media (max-width: 700px) {
 
 .carousel-nav-left{
  margin-left: -30px;
 }

 .carousel-nav-right{
  margin-right: -30px;
 }
 
 .container {
  width: 85%;
 }
}

@media (max-width: 410px) {
 
 .carousel-nav-left{
  margin-left: -25px;
 }

 .carousel-nav-right{
  margin-right: -25px;
 }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>owlcarousel</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    </head>
 
    <body>
  <div class="container">
   <div class="carousel">
   
    <div class="item">
     <img src="http://placehold.it/350x250"  alt="" />
    </div>
    
    <div class="item">
     <img src="http://placehold.it/350x250"  alt="" />
    </div>
    
    <div class="item">
     <img src="http://placehold.it/350x250"  alt="" />
    </div>
    
    <div class="item">
     <img src="http://placehold.it/350x250"  alt="" />
    </div>
    
    <div class="item">
     <img src="http://placehold.it/350x250"  alt="" />
    </div>
    
    <div class="item">
     <img src="http://placehold.it/350x250"  alt="" />
    </div>
    
   </div>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
  <script>
   (function($){
 
    $('.carousel').owlCarousel({
     items: 4,
     loop:true,
     margin:10,
     nav:true,
     navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
     dots: true,
     paginationSpeed: 300,
     rewindSpeed: 400,
     responsive:{
      0:{
       items:1
      },
      490:{
       items:2
      },
      770:{
       items:3
      },
      1200:{
       items:4
      },
      1500:{
       items:5
      }
     }
    })
    
   })(jQuery);
  </script>
 </body>
</html>

Please let me know how I can fix this issue

请让我知道如何解决此问题

Answer 1

采纳答案by Danny Mahoney

Ensure that you have included all of the necessary resources:

确保您已包含所有必要的资源：

jquery-2.1.1.min.js
owl.carousel.min.js
owl.carousel.min.css

jquery-2.1.1.min.js
owl.carousel.min.js
owl.carousel.min.css

Also, make sure your CSS includes the appropriate owl-page and owl-controls

另外，请确保您的 CSS 包含适当的 owl-page 和 owl-controls

Here is one example of vital CSS code:

这是一个重要的 CSS 代码示例：

.owl-theme .owl-controls .owl-page {
    display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
    background: none repeat scroll 0 0 #869791;
    border-radius: 20px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    opacity: 0.5;
    width: 12px;
}

As seen in This JSFiddle.

正如在这个 JSFiddle 中看到的。

Note that if you remove the dots: truefrom the JSFiddle code (and run it) the pagination "dots" still display. However, if you remove the above CSS, the dots do not display.

请注意，如果您dots: true从 JSFiddle 代码中删除（并运行它），分页“点”仍会显示。但是，如果删除上述 CSS，则不会显示点。

Additional Answer

附加答案

As this is the accepted answer I will add another potential fix as provided by @Kevin Vincendeau and brought to attention by @Amr Ibrahim in the comments.

由于这是已接受的答案，我将添加@Kevin Vincendeau 提供的另一个潜在修复，并在评论中引起@Amr Ibrahim 的注意。

Check to make sure your HTML is including all of the necessary classes. Such as owl-carouseland owl-themeon the main container.

检查以确保您的 HTML 包含所有必需的类。例如owl-carousel和owl-theme在主容器上。

Answer 2

回答by Tojo Chacko

I also faced the same problem while using Owl slider for the first time on my webpage. I could not see the dots navigation and I thought to myself this may be a bug and decided to do some investigation.

我第一次在我的网页上使用 Owl 滑块时也遇到了同样的问题。我看不到点导航，我想这可能是一个错误，并决定进行一些调查。

I figured later that there are 2 css files required to be included. One is the own-carousel.min.cssand the other is owl.theme.default.min.css. After this the container div should have the owl-carouseland owl-themeclass in their class list. For e.g:

后来我发现需要包含 2 个 css 文件。一个是own-carousel.min.css，另一个是owl.theme.default.min.css。在此之后，容器 div 应该在其类列表中包含owl-carousel和owl-theme类。例如：

<div id="slider" class="owl-carousel owl-theme">
        <img src="/dist/assets/img1.jpg" /> 
        <img src="/dist/assets/img2.jpg" /> 
        <img src="/dist/assets/img3.jpg" /> 
        <img src="/dist/assets/img4.jpg" />
</div>

Hope this helps for people who are facing this issue later.

希望这对以后遇到此问题的人有所帮助。

Answer 3

回答by Kevin Vincendeau

Classes owl-carouseland owl-themeon main container are necessary for the dots to appear.

类owl-carousel和owl-theme主容器是点出现所必需的。

Answer 4

回答by RAM

The point was the lack of the owl-themeclass in your code!

关键是owl-theme您的代码中缺少类！

Include CSS & JS resources

包含 CSS 和 JS 资源

<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

Set up your HTML

设置您的 HTML

<div class="owl-carousel owl-theme">
  <div> Content 1 </div>
  <div> Content 2</div>
  <div> Content 3</div>
  <div> Content 4</div>
  <div> Content 5</div>
  <div> Content 6</div>
  <div> Content 7</div>
</div>

Note:if you dose not include the owl-themeclass in the parent Divthen the Dots dose not appear to you. So it is necessary to make them visible to end users.

注意：如果您不将owl-theme类包含在父类中，Div那么您不会看到点。因此，有必要使它们对最终用户可见。

Call the plugin

调用插件

Now call the Owl initializer function and your carousel is ready.

现在调用 Owl 初始化函数，你的轮播就准备好了。

$(function(){
  $(".owl-carousel").owlCarousel();
});

Demo:

演示：

$(function(){
    $(".owl-carousel").owlCarousel();        
});

<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    
<!-- Set up your HTML -->
<div class="owl-carousel owl-theme">
  <div> Content 1 </div>
  <div> Content 2</div>
  <div> Content 3</div>
  <div> Content 4</div>
  <div> Content 5</div>
  <div> Content 6</div>
  <div> Content 7</div>
</div>

Answer 5

回答by Samurai Petrus

According to Owl Carousel docs, you have to call the 2 CSSfiles below (inside head tag):

根据 Owl Carousel 文档，您必须调用下面的 2 个CSS文件（在head 标签内）：

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

then near to footer tag, call JQuery and Owl Carousel JS scripts:

然后靠近页脚标签，调用 JQuery 和 Owl Carousel JS 脚本：

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

I was facing the same issue on my code, then i just empty all owl and jquery files, read the owl docs, following the installation process step by step. Now it works fine for me.

我在我的代码中遇到了同样的问题，然后我只是清空所有 owl 和 jquery 文件，阅读 owl 文档，按照安装过程逐步进行。现在它对我来说很好用。

Javascript owlcarousel - 点不出现

提问by Tojo Chacko

采纳答案by Danny Mahoney

回答by Tojo Chacko

回答by Kevin Vincendeau

回答by RAM

回答by Samurai Petrus

相关推荐

最近更新

标签

Javascript owlcarousel - 点不出现

提问by Tojo Chacko

采纳答案by Danny Mahoney

回答by Tojo Chacko

回答by Kevin Vincendeau

回答by RAM

回答by Samurai Petrus

相关推荐

Javascript 嵌套的 redux 减速器

Javascript 我什么时候应该在 jquery 函数中使用 return false ？

Javascript 在集合上设置属性 - 骨干 js

Javascript 未捕获的 InvalidValueError：initMap 不是函数

相关推荐

最近更新

标签