Всем привет, есть такая проблема. Делаю интернет магазин, в карточке товара использую 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, читал документацию, но ни чего не понял )) Поэтому прошу помощи, готов заплатить, если потребуется
