Slick carousel - Использование 3 слайдов с autoPlay = true приводит к тому, что slider-nav работает так, как будто есть 5 слайдов - PullRequest
Новая
       28

Slick carousel - Использование 3 слайдов с autoPlay = true приводит к тому, что slider-nav работает так, как будто есть 5 слайдов

0 голосов
/ 19 декабря 2018

Я использую карусель Slick и хочу показать 3 фотографии.У меня есть 3 фотографии, отображаемые в нижней панели слайдера.Все работает, как и ожидалось, если я установил slidesToShow = 2, но когда slidesToShow = 3, что равняется общему количеству слайдов, слайд-шоу отображает 2 пустых слайда в нижней навигационной панели, хотя на верхнем слайдере правильно отображаются только 3 основных слайда.для панели.

Я понимаю, что если я поверну autoplay = false, то все будет работать так, как ожидалось, но я показываю фотографии до / во время / после, которые я хотел бы выполнить автоматически, так чтобы клиенты могли видеть все возможные варианты.оба варианта на слайде навигации с автоматическим воспроизведением.

Есть идеи, как заставить это работать?Я видел упоминание о том, что этого не следует делать, но это похоже на ценный вариант использования.По крайней мере, в моем сценарии.Я ценю это! 

$('.slider-for').slick({
			slidesToScroll: 1,
			autoplay: true,
      		autoplaySpeed: 4000,
			arrows: true,
			fade: true,
			asNavFor: '.slider-nav'		/* the child Nav bar */
		});
$('.slider-nav').slick({		/* the Nav display with thumbnails */
			slidesToShow: 3,
			slidesToScroll: 1,
			asNavFor: '.slider-for',	/* the parent slider */
			dots: false,
			focusOnSelect: true,
			arrows: false,
			infinite: true
		});
.main {
  font-family:Arial;
  width:500px;
  display:block;
  margin:0 auto;
}
.description {
    background: #fff;
    color: black;
    font-size: 20px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
}
.main h3 {
    background: #fff;
    color: black;
    font-size: 20px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
}
   

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="slick/slicktheme.css"/>
    </head>
    <body>
        <header>
        </header>
        <main>
            <section class="main" align="center">
                 <div class="slider slider-for">
                     <div>
                        <img src="images/Siding/ChimneyRottingHoles.jpg"alt="Chimney with Hardboard Siding Rotting with holes">
                    </div>
                    <div>
                       <img src="images/Siding/Chimney New Flashing.jpg"
                     alt="Chimney replaced with new hardboard siding, new flashing and new cedar trim boards">
                    </div>
                    <div>
                       <img src="images/Siding/Chimney Cedar New Paint.jpg"
                     alt="Chimney and cedar trim repainted with Sherwin Williams Exterior Super Paint in a Satin finish">
                    </div>
                </div>
                <div class="slider slider-nav">
                    <div class="description">Rotted Siding with Holes
                       <h3 style="background-image: url('images/Siding/Chimney Rotting Holes.jpg'); background-size: cover">
                    &nbsp;
                       </h3>
                    </div>
                    <div class="description">New Siding & Flashing
                        <h3 style="background-image: url('images/Siding/Chimney New Flashing.jpg'); background-size: cover">
                    &nbsp;
                        </h3>
                    </div>
                    <div class="description">Painted in Satin Finish
                        <h3 style="background-image: url('images/Siding/Chimney Cedar New Paint.jpg'); background-size: cover">
                    &nbsp;
                        </h3>
                    </div>
                </div>
            </section>
        </main>
        <footer>
        </footer>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="slick/slick.min.js"></script>
        <script>
            $('.slider-for').slick({
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 4000,
                arrows: true,
                fade: true,
                asNavFor: '.slider-nav'        /* the child Nav bar */
            });
            $('.slider-nav').slick({
                /* the Nav display with thumbnails */                slidesToShow: 3,
                slidesToScroll: 1,
                asNavFor: '.slider-for', /* the parent slider */
                dots: false,
                focusOnSelect: true,
                arrows: false,
                infinite: true
            });
        </script>
    </body>
</html>

1 Ответ

0 голосов
/ 19 декабря 2018 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"> 
</script>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css"/>
<style>
.main {
  font-family:Arial;
  width:500px;
  display:block;
  margin:0 auto;
}
.description {
    background: #fff;
    color: black;
    font-size: 20px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
}
.main h3 {
    background: #fff;
    color: black;
    font-size: 20px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
}
body {
    background-color: #dfdfdf;
}
</style>

</head>
<body>
    <main>

        <section class="main" align="center">
            <div class="slider slider-for">
                <div><img src="images/Siding/Chimney Rotting Holes.jpg" alt="Chimney with Hardboard Siding Rotting with holes"></div>
                <div><img src="images/Siding/Chimney New Flashing.jpg" alt="Chimney replaced with new hardboard siding, new flashing and new cedar trim boards"></div>
                <div><img src="images/Siding/Chimney Cedar New Paint.jpg" alt="Chimney and cedar trim repainted with Sherwin Williams Exterior Super Paint in a Satin finish"></div>
            </div>
            <div class="slider slider-nav">
                <div class="description">Rotted Siding with Holes<h3 style="background-image: url('images/Siding/Chimney Rotting Holes.jpg'); background-size: cover">&nbsp;</h3></div>
                <div class="description">New Siding & Flashing<h3 style="background-image: url('images/Siding/Chimney New Flashing.jpg'); background-size: cover">&nbsp;</h3></div>
                <div class="description">Painted in Satin Finish<h3 style="background-image: url('images/Siding/Chimney Cedar New Paint.jpg'); background-size: cover">&nbsp;</h3></div>
            </div>
        </section>

  </main>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>

    <script>
        $('.slider-for').slick({
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 4000,
            arrows: true,
            fade: true,
            asNavFor: '.slider-nav'     /* the child Nav bar */
        });
        $('.slider-nav').slick({        /* the Nav display with thumbnails */
            slidesToShow: 2,
            slidesToScroll: 1,
            asNavFor: '.slider-for',    /* the parent slider */
            dots: false,
            focusOnSelect: true,
            arrows: false,
            infinite: true
        });
    </script>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...