猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

当我在 javascript 中添加自动播放为 true 时如何自动播放此滑块

当我在 javascript 中添加自动播放为 true 时，如何自动播放此滑块，然后滑块不起作用，我如何解决此问题。


jQuery(document).ready(function($) {

 $('.banner_slider').slick({

  slidesToShow: 1,

  slidesToScroll: 1,

  arrows: false,

  fade: true,

  asNavFor: '.thumbnail_slider'

});


$('.thumbnail_slider').slick({

  slidesToShow: 6,

  slidesToScroll: 1,

  asNavFor: '.banner_slider',

  dots: false,

  arrows: false,

  centerMode: true,

  focusOnSelect: true,

  

  responsive: [

    {

      breakpoint: 1024,

      settings: {

        slidesToShow: 3,

        slidesToScroll: 3,

        infinite: true,

        dots: false,

        arrows: false,

      }

    },

    {

      breakpoint: 600,

      settings: {

        slidesToShow: 2,

        slidesToScroll: 2

      }

    },

    {

      breakpoint: 480,

      settings: {

        slidesToShow: 1,

        slidesToScroll: 1

      }

    }

  ]

  

});

 

});



   

*{

    box-sizing: border-box;

}


img {

    max-width:100%;

}


.slider_wrap{

    position:relative;

}


.thumbnail_slider_area {

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    z-index:1;

}


.thumbnail_slider{

    border:1px solid #000;

    padding:1px;

}


.thumbnail_slider .col{

    padding:5px;

}


 

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="slick.css" />

<script type="text/javascript" src="slick.js"></script>


当我在 javascript 中添加自动播放为 true 时，如何自动播放此滑块，然后滑块不起作用，我如何解决此问题。




慕勒3428872
浏览 87回答 1
1回答

梦里花落0921

工作示例：<!DOCTYPE HTML><html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <style>*{&nbsp; &nbsp; box-sizing: border-box;}&nbsp; &nbsp; img {&nbsp; &nbsp; &nbsp; &nbsp; max-width:100%;&nbsp; &nbsp; }&nbsp; &nbsp; .slider_wrap{&nbsp; &nbsp; &nbsp; &nbsp; position:relative;&nbsp; &nbsp; }&nbsp; &nbsp; .thumbnail_slider_area {&nbsp; &nbsp; &nbsp; &nbsp; position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; left:0;&nbsp; &nbsp; &nbsp; &nbsp; bottom:0;&nbsp; &nbsp; &nbsp; &nbsp; width:100%;&nbsp; &nbsp; &nbsp; &nbsp; z-index:1;&nbsp; &nbsp; }&nbsp; &nbsp; .thumbnail_slider{&nbsp; &nbsp; &nbsp; &nbsp; border:1px solid #000;&nbsp; &nbsp; &nbsp; &nbsp; padding:1px;&nbsp; &nbsp; }&nbsp; &nbsp; .thumbnail_slider .col{&nbsp; &nbsp; &nbsp; &nbsp; padding:5px;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <div class="saved"></div>&nbsp; &nbsp; &nbsp; &nbsp; <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>&nbsp; &nbsp; &nbsp; &nbsp; <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>&nbsp; &nbsp; &nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>&nbsp; &nbsp; &nbsp; &nbsp; <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI=" crossorigin="anonymous" />&nbsp; &nbsp; &nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha256-NXRS8qVcmZ3dOv3LziwznUHPegFhPZ1F/4inU7uC8h0=" crossorigin="anonymous"></script>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <div class="slider_wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="banner_slider">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://www.neowebtec.com/images/banner-imgg.jpg" alt="" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://cdn.pixabay.com/photo/2015/12/01/08/44/banner-1071797_960_720.jpg" alt="" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://cdn.pixabay.com/photo/2015/10/29/14/32/business-1012449_960_720.jpg" alt="" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row thumbnail_slider_area">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row thumbnail_slider">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col"><img src="https://www.neowebtec.com/images/banner-imgg.jpg" alt="" /></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col"><img src="https://cdn.pixabay.com/photo/2015/12/01/08/44/banner-1071797_960_720.jpg" alt="" /></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col"><img src="https://cdn.pixabay.com/photo/2015/10/29/14/32/business-1012449_960_720.jpg" alt="" /></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <script>jQuery(document).ready(function($) {&nbsp; &nbsp; $('.banner_slider').slick({&nbsp; &nbsp; &nbsp; &nbsp; slidesToShow: 1,&nbsp; &nbsp; &nbsp; &nbsp; slidesToScroll: 1,&nbsp; &nbsp; &nbsp; &nbsp; arrows: false,&nbsp; &nbsp; &nbsp; &nbsp; fade: true,&nbsp; &nbsp; &nbsp; &nbsp; asNavFor: '.thumbnail_slider'&nbsp; &nbsp; });&nbsp; &nbsp; $('.thumbnail_slider').slick({&nbsp; &nbsp; &nbsp; &nbsp; slidesToShow: 6,&nbsp; &nbsp; &nbsp; &nbsp; slidesToScroll: 1,&nbsp; &nbsp; &nbsp; &nbsp; asNavFor: '.banner_slider',&nbsp; &nbsp; &nbsp; &nbsp; dots: false,&nbsp; &nbsp; &nbsp; &nbsp; arrows: false,&nbsp; &nbsp; &nbsp; &nbsp; centerMode: true,&nbsp; &nbsp; &nbsp; &nbsp; focusOnSelect: true,&nbsp; &nbsp; &nbsp; &nbsp; autoplay: true,&nbsp; &nbsp; &nbsp; &nbsp; //autoplaySpeed: 2000,&nbsp; &nbsp; &nbsp; &nbsp; responsive: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; breakpoint: 1024,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; settings: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slidesToShow: 3,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slidesToScroll: 3,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; infinite: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dots: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; arrows: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; breakpoint: 600,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; settings: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slidesToShow: 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slidesToScroll: 2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; breakpoint: 480,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; settings: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slidesToShow: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slidesToScroll: 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; });});&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; </body>&nbsp;</html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Html5