jQuery 你如何安装猫头鹰旋转木马？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25562224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you install Owl Carousel?
提问by ClaytonAlanKinder
I'm making a practice site and I've never made an image carousel before so I decided to try my luck at one. After some googling, I found Owl Carousel, which seems to be a pretty useful tool for making a carousel. However, I can't understand the instructions at all when it comes to installing it.
我正在制作一个练习网站，我以前从未制作过图像轮播，所以我决定试试运气。经过一番谷歌搜索，我找到了 Owl Carousel，它似乎是制作旋转木马的一个非常有用的工具。但是，在安装它时，我根本无法理解说明。
Here's what I have done so far:
这是我到目前为止所做的：
I downloaded Owl Carousel and moved the 'assets' and 'owl-carousel' folders into my root directory.
I included all of this into my head tag:
<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>I setup my HTML like so:
<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>I added this to my CSS:
#owl-demo .item img{ display: block; width: 100%; height: auto; }Lastly, I activated this script.
<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>
我下载了 Owl Carousel 并将“assets”和“owl-carousel”文件夹移动到我的根目录中。
我将所有这些都包含在我的 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>我像这样设置我的 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>
I am trying to achieve this result:
我试图达到这个结果：
http://owlgraphic.com/owlcarousel/demos/one.html
http://owlgraphic.com/owlcarousel/demos/one.html
Here is all of my code on Jfiddle.
这是我在 Jfiddle 上的所有代码。
This isn't at all how my website looks, but I just wanted the full amount of code to be available in case it is needed.
这根本不是我网站的外观，但我只是希望在需要时可以使用全部代码。
So what am I doing wrong? How can I get this carousel a'working?
那么我做错了什么？我怎样才能让这个旋转木马工作？
回答by anujsoft
<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 }); before script tag closed
请添加}); 在脚本标签关闭之前
回答by Tahridabbas
please replace owl-examplewith owl-demoin div section where is owl-exampleand check. I hope it work.
请在 div 部分替换owl-example为owl-demowhere isowl-example并检查。我希望它起作用。
Also you forgot to close the ready functionat the end. add this })at the end.
你也忘了ready function在最后关闭。})在最后加上这个。
