I am currently in search of a solution to synchronize owl carousel slides.
Already managed to sync two slides successfully, but now looking for a way to have one slide represent a category and the second slide display variable content related to different categories.
My initial approach involved duplicating the code for two slides and modifying all classes and attributes, but this has resulted in confusion across the various slides.
Seeking advice on an alternative solution to implement this concept effectively.
Javascript
var sync1 = $(".service-line");
var sync2 =$(".servicetext");
$(".service-line").owlCarousel({
navigation: false,
pagination: true,
slideSpeed: 1000,
paginationSpeed: 500,
paginationNumbers: true,
singleItem: true,
autoPlay: false,
autoHeight:false,
animateIn: 'slideIn',
animateOut: 'slideOut',
afterAction : syncPosition,
responsiveRefreshRate : 200,
afterMove: afterAction
});
function afterAction(){
$( ".owl-item.active" ).find( "animation-cap" ).addClass( "animated", "bounce" );
}
$(".servicetext").owlCarousel({
items: 1,
pagination: false,
slideSpeed: 800,
paginationSpeed: 700,
animateIn: 'slideIn',
animateOut: 'slideOut',
autoHeight: true,
responsiveRefreshRate : 100,
mouseDrag: false,
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el){
var current = this.currentItem;
$(".servicetext")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced");
if($(".servicetext").data("owlCarousel") !== undefined){
center(current);
}
}
$(".servicetext").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
sync1.trigger("owl.goTo",number);
});
function center(number){
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible){
if(num === sync2visible[i]){
var found = true;
}
}
if(found===false){
if(num>sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", num - sync2visible.length+1);
}else{
if(num - 1 === -1){
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", sync2visible[1]);
} else if(num === sync2visible[0]){
sync2.trigger("owl.goTo", num-1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="konfig-slide-top"> <!--TOP Slider #1 -->
<!--TOP SLIDER slide1-->
<div class="slider-wrap">
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-xs-12 animation-cap">
<h2>Category 1</h2>
</div>
</div>
</div>
<!--img src="img/service/01.png" alt="01"-->
</div>
</div><!--slide1 ends-->
<!--TOP SLIDER slide2-->
<div class="slider-wrap">
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-xs-12 animation-cap">
<h2>Category 1</h2>
</div>
</div>
</div>
<!--img src="img/service/01.png" alt="01"-->
</div>
</div><!--slide2 ends-->
</div>
<!-- Top Slider ends -->
<!-- Bottom Slider Starts -->
<div class="konfig-slide-bottom">
<!-- ====== BOTTOM SLIDER Slide 1 ====== -->
<div class="row">
<div class="row lower-input-main">
<!-- ====== INNER SLIDER Slide starts ====== -->
<div class="konfig-slide-bottom-inner">
<div class="row">
<!--inner slider slide 1 -->
<div class="col-md-12">
<h1 style="color:white;">Slide 1 inner slide</h1>
</div>
</div>
<div class="row">
<!--slide 2 inner slide -->
<div class="col-md-12">
<h1 style="color:white;">Slide 2 inner slide</h1>
</div>
</div>
</div>
</div>
</div>
</div>