Есть простой 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 ...
?