30 мая 2020
Нет комментариев
$(document).ready(function(){ var sync1=$("#owl_detail"); var sync2=$("#owl_thumbs"); var slidesPerPage=4; var syncedSecondary=false; sync1.owlCarousel({ items:1, //slideSpeed:2000, nav:true, autoplay:false, dots:false, loop:false, //responsiveRefreshRate:200, }).on('changed.owl.carousel',syncPosition); sync2.on('initialized.owl.carousel',function(){ sync2.find(".owl-item").eq(0).addClass("current"); }).owlCarousel({ items:slidesPerPage, dots:false, nav:false, loop:false, margin:25, //smartSpeed:200, //slideSpeed:500, //slideBy:slidesPerPage, //responsiveRefreshRate:100 }).on('changed.owl.carousel',syncPosition2); function syncPosition(el){ /* var count=el.item.count-1; var current=Math.round(el.item.index-(el.item.count/2)-.5); if(current<0){ current=count; } if(current>count){ current=0; } */ var current=el.item.index; sync2.find(".owl-item").removeClass("current").eq(current).addClass("current"); var onscreen=sync2.find('.owl-item.active').length-1; var start=sync2.find('.owl-item.active').first().index(); var end=sync2.find('.owl-item.active').last().index(); if(current>end){ sync2.data('owl.carousel').to(current,100,true); } if(current<start){ sync2.data('owl.carousel').to(current-onscreen,100,true); } } function syncPosition2(el){ if(syncedSecondary){ var number=el.item.index; sync1.data('owl.carousel').to(number,100,true); } } sync2.on("click",".owl-item",function(e){ e.preventDefault(); var number=$(this).index(); sync1.data('owl.carousel').to(number,300,true); }); });
<div class="large"> <div class="owl-carousel owl-theme" id="owl_detail"> <div class="item"> <img src="images/detail_1.jpg" alt=""/> </div> <div class="item"> <img src="images/detail_2.jpg" alt=""/> </div> </div> </div> <div class="thumbs"> <div class="owl-carousel owl-theme" id="owl_thumbs"> <div class="item"> <img src="images/detail_1.jpg" alt=""/> </div> <div class="item"> <img src="images/detail_2.jpg" alt=""/> </div> </div> </div>