Вывести активный слайд в отдельный блок owl-carousel

195

15 мая 2018, 17:50

Как вывести активный слайд в отдельной блок где он будет отоброжаться и меняться при клике на слайде в превью. Использую owl-carousel 2.

Конечно есть вариант поставить другой слайдер, но он отпадает хотя бы потому что есть ещё более 5 слайдеров на сайте, как это сделать на js?

$(".detail-slaider").owlCarousel({ 
  loop: true, 
  margin: 10, 
  nav: true, 
  navText: false, 
  responsive: { 
    0: { 
      items: 1 
    }, 
    600: { 
      items: 3 
    }, 
    1000: { 
      items: 3 
    } 
  } 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> 
 
<div class="big-slaid"> 
  <div class="d-wrap"> 
    *здесь большой слайд* 
  </div> 
</div> 
 
<div class="detail-slaider owl-carousel"> 
  <div><img src="http://via.placeholder.com/350x150" alt=""></div> 
  <div><img src="http://via.placeholder.com/350x150" alt=""></div> 
  <div><img src="http://via.placeholder.com/350x150" alt=""></div> 
  <div><img src="http://via.placeholder.com/350x150" alt=""></div> 
</div>

Answer 1

var onInitialized = function(e){ 
	var original = $($('.detail-slaider .active img')[0]).data('original'); 
	$('.big-slaid .d-wrap').empty().css({ 
		backgroundImage: 'url('+original+')' 
	}); 
}; 
$(".detail-slaider").owlCarousel({ 
	loop: true, 
	margin: 10, 
	nav: true, 
	navText: false, 
	responsive: { 
		0: { 
			items: 1 
		}, 
		600: { 
			items: 3 
		}, 
		1000: { 
			items: 3 
		} 
	}, 
	onTranslated: onInitialized, 
	onInitialized: onInitialized 
}); 
$('.detail-slaider').on('click', 'img', function(e){ 
	e.preventDefault(); 
	var original = $(this).data('original'); 
	$('.big-slaid .d-wrap').empty().css({ 
		backgroundImage: 'url('+original+')' 
	}); 
	return !1; 
})

.big-slaid .d-wrap { 
	overflow: hidden; 
	height: 0px; 
	padding-bottom: 50%; 
	background-repeat:norepeat; 
	background-position: center center; 
	background-size: cover; 
	margin-bottom: 15px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/> 
<div class="big-slaid"> 
  <div class="d-wrap"></div> 
</div> 
 
<div class="detail-slaider owl-carousel"> 
  <div><img data-original="https://via.placeholder.com/500x214" src="https://via.placeholder.com/350x150" alt=""></div> 
  <div><img data-original="https://via.placeholder.com/501x214" src="https://via.placeholder.com/350x150" alt=""></div> 
  <div><img data-original="https://via.placeholder.com/502x214" src="https://via.placeholder.com/350x150" alt=""></div> 
  <div><img data-original="https://via.placeholder.com/503x214" src="https://via.placeholder.com/350x150" alt=""></div> 
</div>