文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >owl-carousel从不显示项目

问owl-carousel从不显示项目
EN

Stack Overflow用户
提问于 2017-01-04 12:27:49
回答 4查看 4.6K关注 0票数 1

我有一个owl-carousel的问题，它只显示prev和next按钮，但我添加到owl-carousel中的项从不显示(总是显示:无)这是我的HTML代码

代码语言：javascript
复制
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    autoplay:true,
    autoplayTimeout:10000,
    autoplayHoverPause:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
   });
 });
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="my-slide">
      <ul class="row owl-carousel owl-theme">
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 1</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 2</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 3</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 4</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 5</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 6</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 7</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 8</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 9</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 10</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 11</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 12</p></a></div></li>
      </ul>
    </section>
jquery
html
css
EN

回答 4

Stack Overflow用户

发布于 2017-01-04 12:39:23

我认为.owl-carousel类需要放在jquery初始化中。请检查这个并让我知道。

代码语言：javascript
复制
 $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    autoplay:true,
    autoplayTimeout:10000,
    autoplayHoverPause:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
   });
票数 1
EN

Stack Overflow用户

发布于 2017-01-04 13:07:12

您的.js正确。您只需将owl.carousel.min.css添加到<head>中，并将owl.carousel.js添加到<body>标签中。

添加这个

代码语言：javascript
复制
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>

在<head>标签中。

然后,

添加这个

代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

在<body>标签的底部(在</body>之前)。

票数 1
EN

Stack Overflow用户

发布于 2017-01-04 12:41:16

我想你已经忘记添加owl-carousel css和js文件了。

请添加owl-carousel css和js文件

代码语言：javascript
复制
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>

​

代码语言：javascript
复制
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    autoplay:true,
    autoplayTimeout:10000,
    autoplayHoverPause:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
   });
代码语言：javascript
复制
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css">



<section class="my-slide">
      <ul class="row owl-carousel owl-theme">
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><img src="http://www.w3schools.com/css/trolltunga.jpg"><p>this is item 1</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><img src="http://www.w3schools.com/css/trolltunga.jpg"><p>this is item 2</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><img src="http://www.w3schools.com/css/trolltunga.jpg"><p>this is item 3</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg"><p>this is item 4</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg"><p>this is item 5</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg"><p>this is item 6</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 7</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg"><p>this is item 8</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 9</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 10</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 11</p></a></div></li>
        <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 12</p></a></div></li>
      </ul>
    </section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/41456213

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档