javascript - Slick JS 仅在查看 html 时不起作用

标签 javascript html css

我正在尝试使用 SlickJS 创建幻灯片.

我按照指南创建了这个幻灯片,但是我得到的不是真正的幻灯片,而是一堆 HTML。这是我的作品:

<html>

<head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css" />
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
</head>

<body>

  <div class="your-class">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $('.your-class').slick({
        arrows: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
      });
    });
  </script>

</body>

</html>

最佳答案

问题是您正在使用...加载默认样式

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />

如果删除此行,您可以看到按钮和元素适当滑动。然后,您可以更轻松地使用自己的 CSS 为元素设置样式,就像创建自己的自定义按钮一样。

关于javascript - Slick JS 仅在查看 html 时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50552208/

相关文章:

javascript - 单击上一个按钮后如何停止出现我的空白 div?

css - 从粘性页脚计算错误的布局内容

html - 命名 POST/GET 变量的规则?

html - JAWS/Web-Aim 有没有办法为屏幕阅读器指定文本为 "a time"?

javascript - 如何将两个类样式添加到 anchor 标记

javascript - 如何在现有浏览器中使用 Katalon 脚本

javascript - 选择以前的 anchor 标记并使用 jQuery 添加一个类

javascript - 拍照后如何打开安卓图库?

html - 如何限制 flexbox 布局中最高后代的动态高度?

html - 如何在 Bootstrap 中的导航项之间添加空间