Синхронизация слайдера с svg кнопками
Мне нужно сделать так - чтобы я мог менять слайды на слайдере с помощью svg картинок в хедере, и при активном слайде svg должен менять цвет. Толковой инструкции я не нашёл. Сижу уже целый день с этой проблемой и всё упирается в то, что я слабо знаю программирование. Прошу понять и подсказать какими методами я могу получить желаемый результат.
Сам слайдер Owl-carousel.
Вот что нужно получить:
Как видно выше 1-ая svg отвечает за первый слайд и т.д.
Вот что есть сейчас:
Сам слайдер исправно работает и всё отлично, но опять же повторюсь, мне нужна синхронизация его с самими слайдами.
частичный HTML:
<header class="header">
<div class="container">
<div class="header__wrapper">
<div class="header__logo">
<img src="images/logo-full.png" alt="">
</div>
<!-- НАВИГАЦИЯ К СЛАЙДЕРУ -->
<div class="header__buttons">
<div class="header__buttons-slider">
<a class="header__buttons-link" data-index="1">
<svg data-news-pos="0" class="header__buttons-svg" width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M18.7766 3.22029C14.4802 -1.07483 7.5154 -1.0738 3.22029 3.22265C-1.07483 7.5191 -1.0738 14.4839 3.22265 18.779C7.51909 23.0741 14.4839 23.0731 18.779 18.7766C20.8418 16.7132 22.0003 13.9149 21.9996 10.9973C21.999 8.08014 20.8397 5.2827 18.7766 3.22029ZM16.6588 15.3225C16.6583 15.323 16.6578 15.3235 16.6573 15.324V15.3203L16.1 15.874C15.3792 16.6039 14.3294 16.9042 13.3316 16.666C12.3264 16.3969 11.3707 15.9686 10.501 15.3973C9.69288 14.8809 8.94402 14.2772 8.26795 13.597C7.64589 12.9795 7.08704 12.3014 6.59961 11.573C6.06645 10.7891 5.64445 9.93527 5.34561 9.03563C5.00302 7.97878 5.28691 6.81909 6.07895 6.03998L6.73161 5.38733C6.91306 5.20506 7.20791 5.20441 7.39014 5.38587C7.39062 5.38634 7.39113 5.38681 7.39161 5.38733L9.45226 7.44798C9.63453 7.62944 9.63518 7.92429 9.45372 8.10652C9.45325 8.10699 9.45277 8.10747 9.45226 8.10798L8.24226 9.31798C7.89507 9.66139 7.85141 10.2071 8.13961 10.6013C8.57724 11.2019 9.06154 11.7671 9.58795 12.2917C10.1749 12.8811 10.8129 13.4173 11.4946 13.894C11.8885 14.1688 12.4225 14.1224 12.7633 13.784L13.9329 12.596C14.1144 12.4138 14.4092 12.4131 14.5914 12.5946C14.5919 12.595 14.5924 12.5955 14.5929 12.596L16.6573 14.664C16.8396 14.8454 16.8402 15.1402 16.6588 15.3225Z"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>
</a>
<a class="header__buttons-link" data-index="2">
<svg class="header__buttons-link header__buttons-svg" width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M11 0C7.13432 0 3.91016 3.11395 3.91016 7.08984C3.91016 8.60243 4.36468 9.95122 5.23699 11.2151L10.4574 19.3611C10.7107 19.7571 11.2898 19.7563 11.5426 19.3611L16.7857 11.1874C17.6392 9.98078 18.0898 8.56397 18.0898 7.08984C18.0898 3.1805 14.9093 0 11 0ZM11 10.3125C9.22311 10.3125 7.77734 8.86673 7.77734 7.08984C7.77734 5.31296 9.22311 3.86719 11 3.86719C12.7769 3.86719 14.2227 5.31296 14.2227 7.08984C14.2227 8.86673 12.7769 10.3125 11 10.3125Z"/>
<path d="M16.0387 14.8111L12.7932 19.8852C11.9531 21.195 10.0422 21.1907 9.20614 19.8864L5.95538 14.8125C3.09521 15.4737 1.33203 16.6852 1.33203 18.1328C1.33203 20.6449 6.31331 22 11 22C15.6867 22 20.668 20.6449 20.668 18.1328C20.668 16.6841 18.9023 15.4721 16.0387 14.8111Z"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>
</a>
<a class="header__buttons-link" data-index="3">
<svg class="header__buttons-svg" width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path d="M11 0C4.93436 0 0 4.93436 0 11C0 17.0656 4.93436 22 11 22C17.0656 22 22 17.0656 22 11C22 4.93436 17.0656 0 11 0ZM16.2314 16.6897C16.0527 16.8684 15.818 16.9584 15.5834 16.9584C15.3487 16.9584 15.1139 16.8684 14.9353 16.6897L10.3519 12.1064C10.1796 11.9351 10.0834 11.7021 10.0834 11.4584V5.5C10.0834 4.9931 10.4939 4.58339 11 4.58339C11.5061 4.58339 11.9166 4.9931 11.9166 5.5V11.0789L16.2314 15.3936C16.5898 15.7521 16.5898 16.3313 16.2314 16.6897Z"/>
</svg>
</a>
</div>
<div class="header__burger">
<svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="3" rx="1.5" fill="#333333"/>
<rect y="8" width="24" height="3" rx="1.5" fill="#333333"/>
<rect x="10" y="16" width="14" height="3" rx="1.5" fill="#333333"/>
</svg>
</div>
</div>
<!-- -->
<!-- САМ СЛАЙДЕР ГОРИ ОН ОГНЁМ ;) -->
<div class="header__box">
<a class="header__box-item" data-index="1">
<div class="header__box-title">
+375 25 655-44-33
</div>
<div class="header__box-descr">
Запись и информация
</div>
</a>
<a class="header__box-item" data-index="2">
<div class="header__box-title">
Запись и информация
</div>
<div class="header__box-descr">
fdsfdsfdsfds
</div>
</a>
<a class="header__box-item" data-index="3">
<div class="header__box-title">
45435gfdgdf
</div>
<div class="header__box-descr">
fdsfdsfds
</div>
</a>
</div>
<!-- -->
</div>
</div>
</header>
Как я понял из некоторых советов, то синхронизировать можно через data-index , путём добавления класса active через js или же jquery, но что конкретно нужно прописывать в моём случае не нашёл.
CSS:
.header{
position: relative;
&__wrapper{
display: flex;
align-items: center;
justify-content: space-between;
// position: relative;
background: #FFFFFF;
}
&__buttons{
display: flex;
&-svg{
fill:#333333;
}
&-link{
& + &{
margin-left: 37px;
}
}
&-slider{
svg + svg{
margin-left: 37px;
}
}
}
&__burger{
margin-left: 37px;
}
&__box{
display: none;
}
}
CSS(Media):
@media (max-width:1000px){
.header{
background: #FFFFFF;
z-index: 30;
&__box{
display: block;
position: absolute;
top:100%;
left: 0;
right: 0;
width: 100%;
background: #FFFFFF;
border-radius: 0 0 15px 15px;
box-shadow: 7px 11px 12px rgba(0, 0, 0, 0.1);
padding-top: 25px;
padding-bottom: 25px;
z-index: 1;
text-align: center;
&-item{
width: 100%;
}
}
}
}
.owl-stage-outer{
overflow: hidden;
}
.owl-stage{
display: flex;
}
JS:
$('.header__box').owlCarousel({
items:1,
loop:false,
margin:10,
autoplayHoverPause:true,
});