function synsOwlCarousel() {
var owl = $('.post-slider-4-slider');
var isotopeItem = $('.isotope-grid > .grid-item');
if(owl.length > 0) {
owl.owlCarousel({
margin: 0,
autoplay: true,
autoplayTimeout: 500000,
autoplayHoverPause: true,
loop: true,
nav: false,
dots: true,
center:false,
responsive:{
0: {
items: 1
}
}
});
isotopeItem.each(function(index, el) {
var self = $(this).children().find('.overlay');
self.on('click', function(event) {
event.preventDefault();
owl.trigger('to.owl.carousel', index);
});
});
$(window).on('load', function() {
isotopeItem.each(function(index, el) {
if(index === 0) {
$(this).addClass('grid-item-active');
}
else {
$(this).removeClass('grid-item-active');
}
});
});
owl.on('changed.owl.carousel', function(e) {
isotopeItem.each(function(index, el) {
if(e.page.index == index) {
$(this).addClass('grid-item-active');
}
else {
$(this).removeClass('grid-item-active');
}
});
});
}
}
Function Syns OwlCarousel and Masonry Layout .
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.