Question

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

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

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

我将所有这些都包含在我的头标记中：

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

这完全不是我网站的外观，但我只是想在需要的时候提供全部代码。

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

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部分owl-example中将owl-demo替换为owl-example并检查。我希望它能起作用。

您还忘了最后关闭ready function。在末尾添加此})。

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

2 个答案: