Slick slider keep default dots and add extra ones - html

Question

Can we make custom elements to have the same behavior as dots? What I want is to keep the default dots, but also have some other elements acting as dots. For example, if the slide 2 is active the element dot-2 should have the class active. The same goes for click behavior, if I'll click on the element .dot-3, the slide 3 should be active.
jsfiddle
<div id="carousel" class="slider">
<div class="slider-item">1</div>
<div class="slider-item">2</div>
<div class="slider-item">3</div>
</div>
<div class="extra-dots-box">
<div class="dot-1 extra-dot">
<span>1</span>
<h3>Custom Title</h3>
<p>lorem ipsum lorem ipsum</p>
</div>
<div class="dot-2 extra-dot">
<span>2</span>
<h3>Custom Title</h3>
<p>lorem ipsum lorem ipsum</p>
</div>
<div class="dot-3 extra-dot">
<span>3</span>
<h3>Custom Title</h3>
<p>lorem ipsum lorem ipsum</p>
</div>
</div>
css
.slider-item {
border: 5px solid #333;
background: #ccc;
height: 200px;
font-size: 72px;
text-align: center;
line-height: 200px;
}
/* Slider arrows */
.slick-arrow {
z-index: 9;
}
.slick-prev {
left: 0;
}
.slick-next {
right: 0;
}
/* extra dots */
.extra-dots-box{
display: flex;
margin-top: 100px;
margin-bottom: 100px;
}
.extra-dots-box .extra-dot{
width: 350px;
height: 250px;
background: #111111;
color: #ffffff;
font-size: 18px;
margin-right: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.extra-dots-box .extra-dot:hover{
cursor: pointer;
}
.extra-dots-box .extra-dot:hover,.extra-dots-box .extra-dot.active {
background: red;
}
jQuery
$(document).ready(function() {
var slickOpts = {
slidesToShow: 1,
slidesToScroll: 1,
//centerMode: true,
easing: 'swing', // see http://api.jquery.com/animate/
speed: 700,
dots: true,
customPaging: function(slick,index) {
return '<a>' + (index + 1) + '</a>';
}
};
// Init slick carousel
$('#carousel').slick(slickOpts);
});

Answer 1

jQuery(document).ready(function($) {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
dots: true,
customPaging: function(slick,index) {
return '<a>' + (index + 1) + '</a>';
},
asNavFor: '.slider-nav'
});
//set active class to first slide
$('.slider-nav .slick-slide').eq(0).addClass('slick-active');
$('.slider-nav').slick({
slidesToShow: 6,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
focusOnSelect: true,
responsive: [{
breakpoint: 992,
settings: {
vertical: false,
}
},
{
breakpoint: 768,
settings: {
vertical: false,
}
},
{
breakpoint: 580,
settings: {
vertical: false,
slidesToShow: 3,
}
},
{
breakpoint: 380,
settings: {
vertical: false,
slidesToShow: 2,
}
}
]
});
$('.slider-nav').on('mouseover', '.slick-slide', function (e) {
var $currTarget = $(e.currentTarget),
index = $currTarget.data('slick-index'),
slickObj = $('.slider-for').slick('getSlick');
slickObj.slickGoTo(index);
});
});
.slider-item {
border: 5px solid #333;
background: #ccc;
height: 200px;
font-size: 72px;
text-align: center;
line-height: 200px;
}
/* Slider arrows */
.slick-arrow {
z-index: 9;
}
.slick-prev {
left: 0;
}
.slick-next {
right: 0;
}
/* extra dots */
.extra-dots-box{
display: flex;
margin-top: 100px;
margin-bottom: 100px;
}
.extra-dots-box .extra-dot{
width: 350px;
height: 250px;
background: #111111;
color: #ffffff;
font-size: 18px;
margin-right: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.extra-dots-box .extra-dot:hover{
cursor: pointer;
}
.extra-dots-box .extra-dot:hover,.extra-dots-box .extra-dot.active {
background: red;
}
/*For dots*/
.slick-dots {
position: absolute;
bottom: -45px;
display: block;
width: 100%;
padding: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slider-nav .slick-slide.slick-current.slick-active .extra-dot {
border: 1px solid #80D6CF;
border-radius: 2px;
background-color: red;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.1), 0 2px 4px 0 rgba(0,0,0,0.1);
padding: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div id="carousel" class="slider slider-for">
<div class="slider-item">1</div>
<div class="slider-item">2</div>
<div class="slider-item">3</div>
</div>
<div class="extra-dots-box slider-nav thumb-image">
<div class="dot-1 extra-dot">
<span>1</span>
<h3>Custom Title</h3>
<p>lorem ipsum lorem ipsum</p>
</div>
<div class="dot-2 extra-dot">
<span>2</span>
<h3>Custom Title</h3>
<p>lorem ipsum lorem ipsum</p>
</div>
<div class="dot-3 extra-dot">
<span>3</span>
<h3>Custom Title</h3>
<p>lorem ipsum lorem ipsum</p>
</div>
</div>