Как автоматически воспроизвести этот ползунок, когда я добавляю, что автоматическое воспроизведение имеет значение true в javascript, тогда ползунок не работает, как я это решаю - PullRequest
Новая
       5

Как автоматически воспроизвести этот ползунок, когда я добавляю, что автоматическое воспроизведение имеет значение true в javascript, тогда ползунок не работает, как я это решаю

0 голосов
/ 12 марта 2020

Как автоматически воспроизвести этот слайдер, когда я добавляю autoplay, в 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, тогда слайдер не работает, как я это решаю.

1 Ответ

1 голос
/ 12 марта 2020

Рабочий пример: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...