0

Код. Если вставить Single Item то все без проблем. Но мне нужен Slider Syncing kenwheeler.github.io/slick в самом низу. Как его по стилям подкорректировать как в оригинале? Даю .slider-nav div правый маргин, но он не отступает. и Пока не понятно, как стрелки поставить? Работаю с этим слайдером впервые, подскажите как настроить Slider Syncing? Нужен один большой слайд и снизу 5 маленьких и стрелки. И что за список с цифр тоже не понятно. И когда вставляю в slider-nav картинки вместо текста то слайдер перестает работать. codepen

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});
.slider-nav div {
  width: 50px;
  height: 50px;
  background: red;
  margin-right: 30px;
}
<div class="slider-for">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

<div class="slider-nav">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

1 ответ 1

1

Может быть, как-то так? Не забудьте добавить slick-theme.css или написать свой аналог. И, кстати, не меняйте стили с селекторами вроде .slider div — slick добавит свои элементы (для тех же точек), которые вполне использовать те же теги.

 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});
.slider-nav .item {
  width: 50px;
  height: 50px;
  background: red;
  margin-right: 30px;
  overflow: hidden;
}
<!-- styles -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>

<!-- libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

<div class="slider-for">
  <div>first</div>
  <div>second</div>
  <div>third</div>
  <div>forth</div>
  <div>fifth</div>
</div>

<div class="slider-nav">
  <div class="item">first</div>
  <div class="item">second</div>
  <div class="item">third</div>
  <div class="item">forth</div>
  <div class="item">fifth</div>
</div>

3
  • Нужен один большой слайд и снизу 5 маленьких и стрелки. Те. сами точки не нужны, нужны 5 красных кубиков как у вас и выше один большой. т.е. нажимая на маленькие превью снизу показывается на одном большом. Может вы знаете подобный слайдер? Я много искал, не получается подстроить под себя или настроить. Commented 23 дек. 2016 в 19:49
  • Хотя думаю вы все правильно сделали спасибо! Только не пойму почему на оф. сайте нет примера этой структуры? Commented 23 дек. 2016 в 20:03
  • @АртурЧерешнюк, просто измените параметры на dots: false, slidesToShow: 5 и centerMode: false. Всех примеров всё равно не сделать, мало ли кому что нужно. :) Commented 23 дек. 2016 в 20:26

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.