旋转木马;不起作用

Carousel doesn't work

本文关键字：不起作用 旋转木马      更新时间：2023-10-11

我想在我的网站上添加一个基本的滑动转盘，经过大量搜索，找到了猫头鹰转盘。我按照指示做了每件事，但不管我做什么，它都不起作用。以下是完整的代码：

<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文件都已准备就绪。请某人解决此问题。

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

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

对此：

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

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

相关文章：