добавить свои элементы управления slick slider

есть у меня вот такой вот slick слайдер, тут из управления слайдером остались только кнопки, и те вынесены в div с классом "timeline_dots". Над каждой точкой находится дата (это будет что то типа временной линии), и надо, чтобы при клике на эту самую дату можно было тоже перейти к элементу слайдера, не только при клике по кнопке (dots).

<div class="timeline_dots">
    <div class="dates">
        <span class="date" class="timeline-num-1">1992</span>
        <span class="date" class="timeline-num-2">1993</span>
        <span class="date" class="timeline-num-3">1994</span>
        <span class="date" class="timeline-num-4">1995</span>
        <span class="date" class="timeline-num-5">1996</span>
    </div>
</div>
<div class="timeline">
    <div class="timeline_inner">
        <img data-lazy="slider1.jpg" alt="slider">
        <div class="slider-desc">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex numquam natus distinctio fugiat dolore, sunt sit vel obcaecati. Dolores esse iste deserunt consequatur voluptatum accusamus provident earum, ullam repellat, perspiciatis doloribus, quibusdam nulla. Cum, libero quibusdam, perferendis consequatur tempore aut!
        </div>
    </div>
    <div class="timeline_inner">
        <img data-lazy="slider2.jpg" alt="slider">
        <div class="slider-desc">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero nesciunt ullam id voluptate adipisci quidem autem temporibus voluptates rerum, porro at dolorem, magnam earum, optio deleniti illo iure aliquam hic. Quis nemo reprehenderit debitis ut est, voluptates laboriosam, vitae quibusdam!
        </div>
    </div>
    <div class="timeline_inner">
        <img src="slider3.jpg" alt="slider">
        <div class="slider-desc">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla facere cupiditate suscipit amet asperiores, laudantium ratione expedita atque voluptatibus explicabo aut praesentium at, molestiae quam sed dolore vero a similique debitis minus. Amet pariatur et modi, quas corrupti provident similique.
        </div>
    </div>
    <div class="timeline_inner">
        <img data-lazy="slider4.jpg" alt="slider">
        <div class="slider-desc">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, deserunt asperiores, tenetur blanditiis quaerat odit ex exercitationem, pariatur quibusdam, veritatis quisquam laboriosam. Iste repellendus officia in neque veniam debitis placeat, quo unde reprehenderit eum quibusdam facilis. Blanditiis nihil reprehenderit quasi?
        </div>
    </div>
    <div class="timeline_inner">
        <img data-lazy="slider5.jpg" alt="slider">
        <div class="slider-desc">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit cupiditate, asperiores. Aspernatur eligendi deserunt blanditiis est quisquam doloribus voluptate id aperiam ea ipsum magni aut perspiciatis, rem voluptatibus officia eos rerum deleniti quae nihil facilis repellat atque. Voluptate est, eveniet!
        </div>
    </div>
</div>

Стили:

/* slick slider's */

.slick-track {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.slick-list {
    overflow: hidden;
}

.slick-slide {
    max-width: 100vw;
}

/* slick slider: timeline */

.timeline {
    min-width: 0;
}

.timeline .slick-slide {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
}

.timeline .slick-slide img {
    width: 50vw;
}

.timeline .slick-slide .slider-desc {
    text-align: center;
    width: 40vw;
    display: inline-block;
    margin-left: 7.5vw;
}

.timeline_dots {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
}

.timeline_dots .slick-dots li {
    list-style: none;
    display: inline-block;
}

.timeline_dots .slick-dots button {
    font-size: 0;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    background-color: transparent;
    cursor: pointer;
}

.timeline_dots {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
    margin: 10px 0;
    height: 150px;
}

.timeline_dots .slick-dots {
    width: 80%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-evenly;
}

.timeline_dots .slick-dots li.slick-active button {
    background-color: #fff;
}

.dates {
    width: 80%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-evenly;
    font-size: 24px;
    font-weight: 700;
}

.dates span {
    width: 20px;
    overflow: visible;
    transform: translateX(-15px);
    padding-bottom: 10px;
}