时间戳

首页 > 解决方案 > 当我在javascript中添加自动播放时如何自动播放此滑块是真的然后滑块不起作用我如何解决这个问题

javascript - 当我在javascript中添加自动播放时如何自动播放此滑块是真的然后滑块不起作用我如何解决这个问题

问题描述

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

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>


[for slick css and js download link][1]

How to auto play this slider whan i add autoplay is true in javascript then slider is not working how i resolve this.

<div class="slider_wrap">
<div class="banner_slider">
<img src="https://www.neowebtec.com/images/banner-imgg.jpg" alt="" />
<img src="https://cdn.pixabay.com/photo/2015/12/01/08/44/banner-1071797_960_720.jpg" alt="" />
<img src="https://cdn.pixabay.com/photo/2015/10/29/14/32/business-1012449_960_720.jpg" alt="" />
</div>
<div class="row thumbnail_slider_area">
<div class="container">
<div class="row thumbnail_slider">
<div class="col"><img src="https://www.neowebtec.com/images/banner-imgg.jpg" alt="" /></div>
<div class="col"><img src="https://cdn.pixabay.com/photo/2015/12/01/08/44/banner-1071797_960_720.jpg" alt="" /></div>
<div class="col"><img src="https://cdn.pixabay.com/photo/2015/10/29/14/32/business-1012449_960_720.jpg" alt="" /></div>
</div>
</div>
</div>
</div>
如何在我添加自动播放时自动播放此滑块在 javascript 中为真，然后滑块不起作用我如何解决此问题。

标签： javascripthtmlcssbootstrap-4

解决方案

工作示例：

<!DOCTYPE HTML>
<html>
    <head>
        <style>
*{
    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;

    }

        </style>
    </head>
    <body>
        <div class="saved"></div>
        <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" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI=" crossorigin="anonymous" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha256-NXRS8qVcmZ3dOv3LziwznUHPegFhPZ1F/4inU7uC8h0=" crossorigin="anonymous"></script>  
        <div class="slider_wrap">
            <div class="banner_slider">
                <img src="https://www.neowebtec.com/images/banner-imgg.jpg" alt="" />
                <img src="https://cdn.pixabay.com/photo/2015/12/01/08/44/banner-1071797_960_720.jpg" alt="" />
                <img src="https://cdn.pixabay.com/photo/2015/10/29/14/32/business-1012449_960_720.jpg" alt="" />
            </div>
            <div class="row thumbnail_slider_area">
                <div class="container">
                    <div class="row thumbnail_slider">
                        <div class="col"><img src="https://www.neowebtec.com/images/banner-imgg.jpg" alt="" /></div>
                        <div class="col"><img src="https://cdn.pixabay.com/photo/2015/12/01/08/44/banner-1071797_960_720.jpg" alt="" /></div>
                        <div class="col"><img src="https://cdn.pixabay.com/photo/2015/10/29/14/32/business-1012449_960_720.jpg" alt="" /></div>
                    </div>
                </div>
            </div>
        </div>
        <script>
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,
        autoplay: true,
        //autoplaySpeed: 2000,

        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

            }

        }

        ]


    });


});


        </script>
    </body> 

</html>

推荐阅读