Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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, читал документацию, но ни чего не понял )) Поэтому прошу помощи, готов заплатить, если потребуется
Ответить с цитированием
  #2 (permalink)  
Старый 19.07.2019, 16:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

galaydas,
https://javascript.ru/forum/library-...tml#post438068
Ответить с цитированием
  #3 (permalink)  
Старый 19.07.2019, 17:48
Новичок на форуме
Отправить личное сообщение для galaydas Посмотреть профиль Найти все сообщения от galaydas
 
Регистрация: 19.07.2019
Сообщений: 3

Спасибо большое )) Это почти то, что нужно
Но вот только кнопки переключают слайды по порядку, начиная с первого, а в самом коде слайдера ни каких пометок нет на нужную картинку
<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>

И у нас есть выбор в кнопке прописать - только порядковый номер.
А нужно, что бы кнопка обращалась к конкретной картинке, не зависимо от ее порядкового номера
Ответить с цитированием
  #4 (permalink)  
Старый 19.07.2019, 18:18
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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

Да, я вначале поста написал, что есть data-color="1" и на кнопке и на картинке, ну или пометить еще как то, что бы кнопка "знала"
Ответить с цитированием
  #6 (permalink)  
Старый 19.07.2019, 23:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Сообщение от galaydas
А нужно, что бы кнопка обращалась к конкретной картинке, не зависимо от ее порядкового номера
какой смысл делать слайдер и кнопки без совпадения по индексу?
Сообщение от galaydas
Вот код слайдера
Сообщение от galaydas
Это радио переключатели
у вас всё по порядку, и код по ссылке в сообщении #2 вам подходит, никаких data-color не требуется.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике вставить текст из нужного div ekad Элементы интерфейса 1 24.04.2018 05:48
Вывод select'а при выборе нужного option'a из другого select'a CoRviN88 Элементы интерфейса 2 07.05.2013 13:24
Изменение фона элемента при клике. psydo Элементы интерфейса 8 28.06.2012 23:53
Вывод текста при клике на картинку KTIM Общие вопросы Javascript 7 05.12.2011 05:11
вывод нужного текста в текстовом поле при нажатии на кнопку! fifo4ka Общие вопросы Javascript 7 06.05.2008 13:36