Проблема с уменьшенными изображениями в гладкой карусели - PullRequest
Новая
       32

Проблема с уменьшенными изображениями в гладкой карусели

0 голосов
/ 17 марта 2019

Я хочу показать миниатюры на гладкой карусели. Вот мой код инициализации: 

$('.regular').each(function() {
  var $this = $(this);
  if ($this.children().length > 1) {
    $this.slick({
      dots: true,
      arrows: true,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      navs: true,
      customPaging: function(slider, i) {
        return '<div class="thumbnails">' + $(slider.$slides[i]).find('img').prop('outerHTML') + '</div>';
      }
    });
  }
});

Здесь я пытаюсь показать изображения в списке (показано здесь ).

Есть ли способ показать изображения в виде карусели, чтобы на ней отображались только первые 4 миниатюрные изображения?

1 Ответ

1 голос
/ 17 марта 2019

Вы ищете синхронизацию слайдов, что-то вроде: 

 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  centerMode: false,
  focusOnSelect: true
});
.slick-slide {
  background:green;
  text-align:center;
  margin:3px;
}
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
		
<div class="slider slider-for">
				<div>
					<h3>1</h3>
				</div>
				<div>
					<h3>2</h3>
				</div>
				<div>
					<h3>3</h3>
				</div>
				<div>
					<h3>4</h3>
				</div>
				<div>
					<h3>5</h3>
				</div>
			</div>
			<div class="slider slider-nav">
				<div>
					<h3>1</h3>
				</div>
				<div>
					<h3>2</h3>
				</div>
				<div>
					<h3>3</h3>
				</div>
				<div>
					<h3>4</h3>
				</div>
				<div>
					<h3>5</h3>
				</div>
			</div>
...