126 lines
4.9 KiB
JavaScript
126 lines
4.9 KiB
JavaScript
(function ($) {
|
|
"use strict";
|
|
$(document).on('ready', function () {
|
|
if ($('.testimonials-one').length) {
|
|
var sync1 = $("#sync1");
|
|
var sync2 = $("#sync2");
|
|
|
|
var currentThumbBtn = $('.testimonials-one__button__current-btn');
|
|
var prevThumbBtn = $('.testimonials-one__button__prev-btn');
|
|
var nextThumbBtn = $('.testimonials-one__button__next-btn');
|
|
|
|
var slidesPerPage = 1; //globaly define number of elements per page
|
|
var syncedSecondary = true;
|
|
|
|
sync1.owlCarousel({
|
|
items: 1,
|
|
smartSpeed: 700,
|
|
autoplayHoverPause: true,
|
|
nav: false,
|
|
autoplay: true,
|
|
dots: false,
|
|
animateOut: 'fadeOut',
|
|
animateIn: 'fadeIn',
|
|
mouseDrag: false,
|
|
touchDrag: false,
|
|
pullDrag: false,
|
|
freeDrag: false,
|
|
loop: true,
|
|
autoplayTimeout: 5000,
|
|
responsiveRefreshRate: 5000,
|
|
onInitialize: callThumbOnNav,
|
|
onTranslate: callThumbOnNav,
|
|
navText: ['<i class="catch fa fa-angle-right"></i>', '<i class="catch fa fa-angle-left"></i>'],
|
|
}).on('changed.owl.carousel', syncPosition);
|
|
|
|
sync2
|
|
.on('initialized.owl.carousel', function (e) {
|
|
sync2.find(".owl-item").eq(0).addClass("current");
|
|
})
|
|
.owlCarousel({
|
|
items: slidesPerPage,
|
|
dots: false,
|
|
nav: false,
|
|
// loop: true,
|
|
mouseDrag: false,
|
|
touchDrag: false,
|
|
pullDrag: false,
|
|
freeDrag: false,
|
|
animateOut: 'fadeOut',
|
|
animateIn: 'fadeIn',
|
|
smartSpeed: 700,
|
|
slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
|
|
responsiveRefreshRate: 5000
|
|
}).on('changed.owl.carousel', syncPosition2);
|
|
|
|
function syncPosition(el) {
|
|
//if you set loop to false, you have to restore this next line
|
|
//var current = el.item.index;
|
|
|
|
//if you disable loop you have to comment this block
|
|
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;
|
|
}
|
|
|
|
//end block
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
function callThumbOnNav(e) {
|
|
var idx = e.item.index;
|
|
var currentThumb = sync1.find('.item').eq(idx).find('.testimonials-one__single').data('thumb-img');
|
|
var nxtThumb = sync1.find('.item').eq(idx + 1).find('.testimonials-one__single').data('thumb-img');
|
|
var prvThumb = sync1.find('.item').eq(idx - 1).find('.testimonials-one__single').data('thumb-img');
|
|
|
|
prevThumbBtn.css('background-image', 'url(' + prvThumb + ')');
|
|
nextThumbBtn.css('background-image', 'url(' + nxtThumb + ')');
|
|
currentThumbBtn.css('background-image', 'url(' + currentThumb + ')');
|
|
}
|
|
|
|
sync2.on("click", ".owl-item", function (e) {
|
|
e.preventDefault();
|
|
var number = $(this).index();
|
|
sync1.data('owl.carousel').to(number, 300, true);
|
|
});
|
|
|
|
nextThumbBtn.on('click', function (e) {
|
|
sync1.trigger('next.owl.carousel');
|
|
e.preventDefault();
|
|
});
|
|
prevThumbBtn.on('click', function (e) {
|
|
sync1.trigger('prev.owl.carousel');
|
|
e.preventDefault();
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
})(jQuery); |