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

我正在制作一个练习网站，之前我从未制作过图片传送带，所以我决定尝试一下我的运气。经过一些Google搜索之后，我发现了猫头鹰旋转木马，这似乎是制作旋转木马的一个非常有用的工具。但是，在安装它时我根本无法理解这些说明。你如何安装猫头鹰旋转木马？

这是我迄今所做的：

我下载猫头鹰旋转木马和移动的“资产”和“猫头鹰旋转木马”文件夹到我的根目录。

我包括这一切在我的脑海标签：

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

设置我的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>

我将此添加到我的CSS：

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

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

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

这不是我所有的网站看起来，但我只是想代码的全部金额将在情况下，它需要提供。

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

来源

2014-08-29 ClaytonAlanKinder

你错过了）（结束时）（“准备好”呼叫） – fdreger 2014-08-29 05:37:10

哎呀，很好的结果。不幸的是，它添加后仍然不起作用。 – ClaytonAlanKinder 2014-08-29 05:39:42

您的HTML标记需要包装在＃owl-demo ID – 2014-08-29 06:45:26

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

pleas add}）;在脚本标记关闭之前

来源

2014-08-29 09:58:41 anujsoft

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

回答

相关问题