jquery - 你如何安装猫头鹰旋转木马？

Question

我正在制作一个练习网站，但我之前从未制作过图像轮播，所以我决定试试运气。经过一番谷歌搜索，我找到了 Owl Carousel，它似乎是一个非常有用的制作旋转木马的工具。但是，在安装它时，我根本无法理解说明。

这是我到目前为止所做的：

1. 我下载了 Owl Carousel 并将“assets”和“owl-carousel”文件夹移动到我的根目录中。

2. 我将所有这些都包含在我的 head 标签中：

   <meta charset="utf-8">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <link rel="stylesheet" type="text/css" href="style.css">
   <link rel="stylesheet" type="text/css" href="flexbox.css">
   <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
   <link rel="stylesheet" href="owl-carousel/owl.theme.css">
   <script src="assets/owl-carousel/owl.carousel.js"></script>
   

3. 我像这样设置我的HTML：

   <div id="owl-example" class="owl-carousel">
       <div class="img1"> Your Content </div>
       <div class="img2"> Your Content </div>
       <div class="img3"> Your Content </div>
   </div>
   

4. 我将此添加到我的 CSS 中：

   #owl-demo .item img{
   display: block;
   width: 100%;
   height: auto;
   }
   

5. 最后，我激活了这个脚本。

       <script>
       $(document).ready(function() {
   
       $("#owl-demo").owlCarousel({
   
           navigation : true, // Show next and prev buttons
           slideSpeed : 300,
           paginationSpeed : 400,
           singleItem:true
   
           // "singleItem:true" is a shortcut for:
           // items : 1, 
           // itemsDesktop : false,
           // itemsDesktopSmall : false,
           // itemsTablet: false,
           // itemsMobile : false
       });
       </script>
   

我正在努力实现这个结果：

http://owlgraphic.com/owlcarousel/demos/one.html

这是我在 Jfiddle 上的所有代码。

http://jsfiddle.net/pd19q8vc/

这根本不是我的网站的外观，但我只是希望在需要时可以使用全部代码。

那么我做错了什么？我怎样才能让这个旋转木马工作？

Answer 1

    <script>
    $(document).ready(function() {

    $("#owl-demo").owlCarousel({

        navigation : true, // Show next and prev buttons
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem:true

        // "singleItem:true" is a shortcut for:
        // items : 1, 
        // itemsDesktop : false,
        // itemsDesktopSmall : false,
        // itemsTablet: false,
        // itemsMobile : false
    });
});
</script>

请添加}); 在脚本标签关闭之前

Answer 2

请在 div 部分替换为 where isowl-example并检查。我希望它能奏效。owl-demoowl-example

你也忘了ready function在最后关闭。在最后添加这个})。