owl carousel 2 - вывод нужного изображения при клике с внешних кнопок
 

Всем привет, есть такая проблема. Делаю интернет магазин, в карточке товара использую owl carousel 2 с большой фоткой и миниатюрными превью.

Например, товар - майка, в слайдере 3 фото (Белая, черная и серая)
Есть отдельно три радио кнопки (не в слайдере) с аналогичными цветами

Как сделать так, чтобы при выборе радио кнопки, перескакивало фото на нужный цвет?
Вот код слайдера (вставил атрибут data, что бы определять нужное фото)

<div class="owl-carousel owl-theme" id="owl_big">
		<div class="photo" data-color="1"><a href="#"><img src="img1.jpg" /></a></div>
		<div class="photo" data-color="2"><a href="#"><img src="img2.jpg" /></a></div>
		<div class="photo" data-color="3"><a href="#"><img src="img3.jpg" /></a></div>
	</div>

Это радио переключатели

<div class="color_block">
<label data-color="1"><input type="radio" name=""  value="Белая" /> Белая</label>
<label data-color="2"><input type="radio" name=""  value="Черная" /> Черная</label>
<label data-color="3"><input type="radio" name=""  value="Серая" /> Серая</label>
</div>

Сам вызов слайдера

$('#owl_big').owlCarousel({
    loop:false,
    nav:true,
    dotsEach:true,
})
// Миниатюры в навигации
jQuery( document ).ready(function() { 
			dotcount = 1;
	 
			jQuery('.owl-dot').each(function() {
			  jQuery( this ).addClass( 'dotnumber' + dotcount);
			  jQuery( this ).attr('data-info', dotcount);
			  dotcount=dotcount+1;
			});
			
			slidecount = 1;
	 
			jQuery('.owl-item').each(function() {
			  jQuery( this ).addClass( 'slidenumber' + slidecount);
			  slidecount=slidecount+1;
			});
			
			jQuery('.owl-dot').each(function() {
			
          grab = jQuery(this).data('info');

          slidegrab = jQuery('.slidenumber'+ grab +' img').attr('src');
          console.log(slidegrab);

          jQuery(this).css("background-image", "url("+slidegrab+")");  

      });							
});

В JS я новичок, я понимаю, что скорее всего нужно копать в сторону событий owlCarousel, читал документацию, но ни чего не понял )) Поэтому прошу помощи, готов заплатить, если потребуется

galaydas,
https://javascript.ru/forum/library-...tml#post438068

Спасибо большое )) Это почти то, что нужно
Но вот только кнопки переключают слайды по порядку, начиная с первого, а в самом коде слайдера ни каких пометок нет на нужную картинку

<div class="owl-carousel">
    <div class="item"> <div class="string1">111 up</div><div class="string2">111 dn</div>
        <h4>1</h4>
    </div>
    <div class="item"> <div class="string1">222 up</div><div class="string2">222 dn</div>
        <h4>2</h4>
    </div>
    <div class="item"> <div class="string1">333 up</div><div class="string2">333 dn</div>
        <h4>3</h4>
    </div>

И у нас есть выбор в кнопке прописать - только порядковый номер.
А нужно, что бы кнопка обращалась к конкретной картинке, не зависимо от ее порядкового номера

galaydas,
тоесть кнопка должна сама "знать" к какой картинке относится?

Да, я вначале поста написал, что есть data-color="1" и на кнопке и на картинке, ну или пометить еще как то, что бы кнопка "знала" :)

какой смысл делать слайдер и кнопки без совпадения по индексу?у вас всё по порядку, и код по ссылке в сообщении #2 вам подходит, никаких data-color не требуется.