Question

我正在尝试在我的网站上添加一个简单的轮播。经过一番研究后我找到了owl.carousel.js，我喜欢他们使用的布局，这似乎就是我在寻找的东西。

请记住，我是新手。：）

我的问题是在我下载文件并将链接添加到我的HTML后如何使其工作？另外我不确定我是否必须在html中添加JS或者像我一样分开。在猫头鹰网站上，它只是说调用该功能。

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <a link href="main.css" rel="stylsheet" type="text/css">
    <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
    <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
    <title></title>
  </head>
  <body>
    <div class="owl-carousel">
      <div> <img src="images/images-1.jpeg"> </div>
      <div> <img src="images/images-2.jpeg"> </div>
      <div> <img src="images/images-3.jpeg"> </div>
      <div> <img src="images/images.jpeg"> </div>
      <div> <img src="images/shutterstock_204805573.jpg"> </div>
      <div> <img src="images/shutterstock_221107753.jpg"> </div>
      <div> <img src="images/smug%20mug%20portrait%20copy.jpg"> </div>
    </div>
  
    <script src="jquery.min.js"></script>
    <script src="owlcarousel/owl.carousel.min.js"></script>
  </body>
</html>

Answer 1

看看你的HTML，它应该有效。只需在包含owl carousel js文件后立即添加片段（您首先提到的）。所以，决赛应该是这样的：

 ...
 <script src="jquery.min.js"></script>
 <script src="owlcarousel/owl.carousel.min.js"></script>

 $(document).ready(function(){
  $(".owl-carousel").owlCarousel();
 });
 </body>
 </html>

Answer 2

首先只是为了初学者，你的CSS链接设置错误，删除超链接标签，因为链接是它自己的标签...我想我看到它，从我看到它唯一的选项... PS你做了缺少向我们展示您的文件位置和代码......

＆＃13;

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

＆＃13;

Answer 3

从检查Chrome公开的Javascript控制台运行它是测试IMO的最佳方式。运行该脚本基本上是您通过JQuery加载它时所做的事情，在这里您只是手动执行。如果该网站有CDN，我说首先尝试使用CDN，然后如果它正常工作，您可以下载并让它在本地工作。

如何在HTML和CSS中使用外部库和插件如owl.carousel.js？

3 个答案: