Добрый день.
В JS ламер, пытаюсь познакомится с slick slider
Прикрутил слайдер с 20+ листами, навигацию (в виде квадратов), но теперь необходимо к каждому слайду прикрутить кнопку с наименованием слайда (для выбора любой задачи).
Навигация служит визуальной частью приближением конца древа задач.
Я прикрутил 2 слайдер (asNavFor), но получил прокрутку всех наименований слайдов, но это не то что необходимо (возможно не использовал все настройки?).
Нужно статичное закрепление названий слайдов для выбора задачи с переходам на нужный.
Пониманию, что дублировать действия навигации, не самая лучшая идея, но прошу помочь.
spoilerjs
<div id="scrollup"><img alt="Прокрутить вверх" src="/download/attachments/968033342/arrow-up.svg"></div>
<script src="/download/attachments/1004876771/jquery2_2_4.js"></script>
<script src="/download/attachments/1004876771/slick.js"></script>
<link href="/download/attachments/1004876771/slick.css" rel="stylesheet">
<script defer>
$(function() {
$('.product-slider .slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots: true,
adaptiveHeight: true,
asNavFor: '.product-slider .slider-nav'
});
$('.product-slider .slider-nav').slick({
slidesToShow: 7,
slidesToScroll: 1,
asNavFor: '.product-slider .slider-for',
dots: false,
arrows: false,
centerMode: false,
autoplay: false,
focusOnSelect: true,
});
});
</script>
<style>
.stranica .left, .stranica .right {width: 100% !important;}
.stranica .left .menu ul li {
width: auto !important;
clear: none !important;
float: none !important;
display: inline-block !important;
margin: 5px !important;
}
.slick-slider {
padding-top: 20px;
text-align: center;
}
.slick-list {
max-width: calc(100% - 100px);
display: inline-block;
vertical-align: top;
margin: 40px 0;
}
.slick-arrow {
overflow: hidden;
vertical-align: top;
padding: 0;
margin: 40px 0;
border: 0;
background: #000;
width: 30px;
height: 30px;
border-radius: 50%;
position: relative;
color: transparent;
}
.slick-arrow:hover {
background: #D5150B !important;
cursor: pointer;
}
.slick-prev {
float: left;
margin-left: 10px;
}
.slick-next {
float: right;
margin-right: 10px;
}
.slick-prev:after, .slick-next:after {
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
color: #fff !important;
width: 15px;
height: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 13px;
text-align: center;
}
.slick-prev:after {
content: "<";
}
.slick-next:after {
content: ">";
}
.slick-dots {
position: absolute;
top: 20px;
padding: 0;
left: 0;
width: 100%;
display: block;
list-style-type: none;
text-align: center;
margin: 0;
}
.slick-dots li {
display: inline-block;
margin: 0 10px;
}
.slick-dots li.slick-active {}
.slick-dots li button {
color: transparent !important;
border: none;
background: #999;
width: 20px;
padding: 0;
height: 20px;
}
.slick-dots li.slick-active button {
background: #D5150B !important;
}
.slick-dots li:hover, .slick-dots li button:hover {
cursor: pointer;
}
.slick-slide {
text-align: left;
}
.slick-slide img {
width: auto;
}
.list {
text-align: center !important;
}
.list p {
float: none;
display: inline-block;
margin: 5px;
}
.images img {
display: inline-block;
vertical-align: middle;
max-width: 500px !important;
margin: 0 10px 0 0;
}
</style>
