0

Есть простой slick слайдер:

if ($('.slider').length) {
  $('.slider').each(function() {

    var $this = $(this);

    $this.slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      dots: true,
      customPaging: function(slick, index) {
        return '<a class="page-link">' + (index + 1) + '</a>';
      },
      infinite: true,
      touchMove: true,
      draggable: true,
      lazyLoad: 'ondemand',
      prevArrow: '<button class="slick-prev"></button>',
      nextArrow: '<button class="slick-next"></button>',
    });

  });
}
.x {
  width: 100%;
  height: 100px;
  background: #ccc;
}

.y {
  width: 100%;
  height: 100px;
  background: orangered;
}

.slick-dots {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex !important;
  justify-content: center;
  margin-top: 20px;
}

.slick-dots .page-link {
  display: block;
  width: 15px;
  height: 15px;
  text-align: center;
}

.slick-arrow {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  z-index: 100;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="slider">
  <div class="item">
    <div class="x"></div>
  </div>
  <div class="item">
    <div class="y"></div>
  </div>
  <div class="item">
    <div class="x"></div>
  </div>
  <div class="item">
    <div class="y"></div>
  </div>
  <div class="item">
    <div class="x"></div>
  </div>
</div>

Вопрос: Как продублировать стрелки управления, чтобы были еще одни рядом с dots с 1 2 3 4 ... ?

1 ответ 1

2

Скорее всего, единственный способ - клонировать существующие стрелки и вешать им обработчики клика на прокрутку слайдера.

$('.slider').on('init reInit',function(e,slick){
  slick.$dots.wrap('<div class="bottom-nav" />');
  slick.$prevArrow.clone().insertBefore(slick.$dots).on('click',function(){
    slick.slickPrev();
  })
  slick.$nextArrow.clone().insertAfter(slick.$dots).on('click',function(){
    slick.slickNext();
  })
})
$('.slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  customPaging: function(slick, index) {
    return '<a class="page-link">' + (index + 1) + '</a>';
  },
  infinite: true,
  touchMove: true,
  draggable: true,
  lazyLoad: 'ondemand',
  prevArrow: '<button class="slick-prev"><</button>',
  nextArrow: '<button class="slick-next">></button>',
});
.slider{
  margin:0 0 20px;
  border:1px solid;
}
.x {
  width: 100%;
  height: 100px;
  background: #ccc;
}

.y {
  width: 100%;
  height: 100px;
  background: orangered;
}

.slick-dots {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin: 0 auto;
}
.slick-dots li{
  display: inline-block;
}
.slick-dots .page-link {
  display: block;
  width: 15px;
  height: 15px;
  text-align: center;
}

.slick-arrow {
  position: absolute;
  top: 40px;
  width: 20px;
  height: 20px;
  z-index: 100;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}

.bottom-nav{
  display: flex;
  align-items: center;
  margin: 20px 0 0;
 }
 .bottom-nav .slick-arrow{
  position: static;
 }
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="slider">
  <div class="item">
    <div class="x"></div>
  </div>
  <div class="item">
    <div class="y"></div>
  </div>
  <div class="item">
    <div class="x"></div>
  </div>
  <div class="item">
    <div class="y"></div>
  </div>
</div>

<div class="slider">
  <div class="item">
    <div class="x"></div>
  </div>
  <div class="item">
    <div class="y"></div>
  </div>
  <div class="item">
    <div class="x"></div>
  </div>
  <div class="item">
    <div class="y"></div>
  </div>
</div>

3
  • Спасибо!!! Еще бы и обернуть все в один контейнер (точки\цифры и вторые стрелочки) )
    – SVE
    Commented 31 мая 2019 в 12:47
  • Как то так. Правда при таком подходе будет баг с классом slick-disabled при выключении бесконечной прокрутки
    – zhurof
    Commented 31 мая 2019 в 12:57
  • СПАСИБО!!! Еще раз)))
    – SVE
    Commented 31 мая 2019 в 12:59

Ваш ответ

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

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