Question

我想在我的网站上添加一个基本的滑动旋转木马，经过大量的搜索后发现Owl Carousel。我按照说明按照一切，但不管我做什么，它都不起作用。以下是完整代码：

<html>
<head>
    <title>Carousel</title>

    <link rel="stylesheet" href="owl/owl.carousel.js"> 
    <link rel="stylesheet" href="owl/owl.theme.default.css">
    <link rel="stylesheet" href="owl/owl.animate.css">

</head>

<body>
    <div class="owl-carousel">
       <div class="item"><h4>1</h4></div>
       <div class="item"><h4>2</h4></div>
       <div class="item"><h4>3</h4></div>
       <div class="item"><h4>4</h4></div>
       <div class="item"><h4>5</h4></div>
       <div class="item"><h4>6</h4></div>
       <div class="item"><h4>7</h4></div>
       <div class="item"><h4>8</h4></div>
       <div class="item"><h4>9</h4></div>
       <div class="item"><h4>10</h4></div>
       <div class="item"><h4>11</h4></div>
       <div class="item"><h4>12</h4></div>
</div>

<script src="js/jquery-2.2.2.min.js"></script>
<script src="owl/owl.carousel.js"></script>
<script>
    $(document).ready(function(){
    $('.owl-carousel').owlCarousel(
        loop:true,
        margin:10,
        nav:true,
        responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
        }
        }));
    });
    </script>
</body>

编辑：浏览器的输出只是一系列垂直显示的数字而不是水平旋转木马。

我确信所需的CSS和Javascript文件都已到位。请解决此问题。

Answer 1

您正在关闭一个}您打开的内容。尝试更改此内容：

        1000:{
            items:5
        }
        }
        }));
    });
    </script>

对此：

        1000:{
            items:5
        }
        }));
    });
    </script>

或添加function({...}); 希望它有所帮助！

旋转木马不起作用

1 个答案: