光滑的轮播没有出现

时间:2016-08-31 11:16:09

标签: jquery html plugins slick.js

这是我第一次在我的代码中实现库,到目前为止它还没有顺利进行。我已经尝试了所有东西,但光滑的旋转木马似乎没有出现,我知道有些东西我不知道但是因为这是我第一次,我不知道我可能做错了什么。这是我的代码:

<!DOCTYPE html>
<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/style.css"/>
  <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="autoplay">
    <div><img src="http://placehold.it/350x300?text=1"></div>
    <div><img src="http://placehold.it/350x300?text=2"></div>
    <div><img src="http://placehold.it/350x300?text=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(){
      $('.autoplay').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    });
  });
  </script>

  </body>
</html>

这是我的文件夹结构:http://prntscr.com/ccgney

这就是结果:http://prntscr.com/ccgm9e

2 个答案:

答案 0 :(得分:1)

浏览器无法访问jquery源,您需要将include更改为:

def addVcsRoot(**kwargs):
    headers = {'Content-type': 'application/xml'}

    data = """<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
        <vcs-root id="{vcsRootId}"  name="{vcsRootName}"
        "vcsName="jetbrains.git" href="/app/rest/vcs-roots/id:"{vcsRootId}"\>""".format(**kwargs)

对于这类事情,请始终牢记检查您的网络控制台

答案 1 :(得分:0)

添加更多幻灯片

<div class="autoplay">
    <div><img src="http://placehold.it/350x300?text=1"></div>
    <div><img src="http://placehold.it/350x300?text=2"></div>
    <div><img src="http://placehold.it/350x300?text=3"></div>
     <div><img src="http://placehold.it/350x300?text=1"></div>
    <div><img src="http://placehold.it/350x300?text=2"></div>
    <div><img src="http://placehold.it/350x300?text=3"></div>
  </div>

添加一些自定义CSS

.slick-next{right:15px}
.slick-prev{left:5px; z-index:9;}

https://jsfiddle.net/6nb29zym/

相关问题