Показать сообщение отдельно
  #1 (permalink)  
Старый 19.07.2019, 14:48
Новичок на форуме
Отправить личное сообщение для galaydas Посмотреть профиль Найти все сообщения от galaydas
 
Регистрация: 19.07.2019
Сообщений: 3

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