/home/moonrcjl/template.moontelict.com/attorix/assets/js/slider-active.js
/***************************************************
==================== JS INDEX ======================
****************************************************
01. mttestimonial__active
02. mttextslider__active
03. mt-testimonial-active
04. mt-team-slider-active
****************************************************/
(function ($) {
"use strict";
////////////////////////////////////////////////////
// 01. Swiper Js
var swiper = new Swiper(".mtservice__active", {
slidesPerView: 1,
spaceBetween: 20,
loop: true,
keyboard: {
enabled: true,
},
navigation: {
nextEl: ".mtservice__button-next",
prevEl: ".mtservice__button-prev",
},
breakpoints: {
1399: {
slidesPerView: 4,
},
1199: {
slidesPerView: 3,
},
991: {
slidesPerView: 2,
},
767: {
slidesPerView: 2,
},
550: {
slidesPerView: 1,
},
0: {
slidesPerView: 1,
},
},
});
////////////////////////////////////////////////////
// 01. Swiper Js
var swiper = new Swiper(".mtservice__active-2", {
slidesPerView: 1,
spaceBetween: 20,
loop: true,
keyboard: {
enabled: true,
},
pagination: {
el: ".mtservice__pagination",
clickable: true,
},
breakpoints: {
1399: {
slidesPerView: 4,
},
1199: {
slidesPerView: 3,
},
991: {
slidesPerView: 2,
},
767: {
slidesPerView: 2,
},
550: {
slidesPerView: 1,
},
0: {
slidesPerView: 1,
},
},
});
////////////////////////////////////////////////////
// 01. Swiper Js
var swiper = new Swiper(".mtproject__active", {
slidesPerView: 1,
spaceBetween: 20,
loop: true,
keyboard: {
enabled: true,
},
navigation: {
nextEl: ".mtservice__button-next",
prevEl: ".mtservice__button-prev",
},
breakpoints: {
1781: {
slidesPerView: 3,
},
1199: {
slidesPerView: 3,
},
991: {
slidesPerView: 2,
},
767: {
slidesPerView: 2,
},
550: {
slidesPerView: 1,
},
0: {
slidesPerView: 1,
},
},
});
////////////////////////////////////////////////////
// 01. Swiper Js
var swiper = new Swiper(".mttestimonial__active", {
slidesPerView: 1,
spaceBetween: 20,
loop: true,
keyboard: {
enabled: true,
},
pagination: {
el: ".mttestimonial__pagination",
clickable: true,
},
breakpoints: {
1399: {
slidesPerView: 4,
},
1199: {
slidesPerView: 3,
},
991: {
slidesPerView: 2,
},
767: {
slidesPerView: 2,
},
550: {
slidesPerView: 1,
},
0: {
slidesPerView: 1,
},
},
});
////////////////////////////////////////////////////
// 01. Swiper Js
var swiper = new Swiper(".mttestimonial__slide-active", {
slidesPerView: 1,
spaceBetween: 20,
loop: true,
keyboard: {
enabled: true,
},
pagination: {
el: ".mttestimonial__pagination",
clickable: true,
},
});
// mt-testimonial-content-active
var slider = new Swiper('.mt-testimonial-content-active', {
slidesPerView: 1,
centeredSlides: true,
loop: true,
loopedSlides: 3,
navigation: {
nextEl: '.mttestimonial__button-next',
prevEl: '.mttestimonial__button-prev',
},
});
var thumbs = new Swiper('.mt-testimonial-thumb-active', {
slidesPerView: 2,
spaceBetween: 10,
centeredSlides: false,
centeredSlides: true,
loop: true,
autoplay: false,
slideToClickedSlide: true,
});
slider.controller.control = thumbs;
thumbs.controller.control = slider;
// mt-slider-content-active
var slider = new Swiper('.mt-slider-content-active', {
slidesPerView: 1,
centeredSlides: true,
loop: true,
// effect: "fade",
autoplay: true,
loopedSlides: 1,
pagination: {
el: '#paginations',
type: 'custom',
renderCustom: function (swiper, current, total) {
let zero = total > 9 ? '' : '0';
let index = zero + current
let all = zero + total
let html = `<div class="shop-slider-pagination">
<span>${zero}</span>
<span class="active">${index}</span>
<span>${all}</span>
</div>`;
return html;
}
}
});
var thumbs = new Swiper('.mt-slider-thumb-active', {
slidesPerView: 2,
spaceBetween: 15,
centeredSlides: false,
centeredSlides: true,
loop: true,
autoplay: false,
slideToClickedSlide: true,
});
slider.controller.control = thumbs;
thumbs.controller.control = slider;
////////////////////////////////////////////////////
// 02. mttextslider__active
var mt_brand_slide = new Swiper(".mttextslider__active", {
loop: true,
freemode: true,
slidesPerView: 'auto',
spaceBetween: 0,
centeredSlides: true,
allowTouchMove: false,
speed: 8000,
autoplay: {
delay: 1,
disableOnInteraction: true,
},
});
////////////////////////////////////////////////////
// 03. mt-testimonial-slider-active
const progressBar = $(".mt-slider-progress-bar span");
var swiper = new Swiper(".mt-testimonial-active", {
slidesPerView: 1,
spaceBetween: 24,
loop: true,
autoplay: false,
arrow: false,
speed: 1000,
a11y: false,
breakpoints: {
1781: {
slidesPerView: 2,
},
1199: {
slidesPerView: 2,
},
991: {
slidesPerView: 1,
},
767: {
slidesPerView: 1,
},
550: {
slidesPerView: 1,
},
0: {
slidesPerView: 1,
},
},
pagination: {
el: '#paginations',
type: 'custom',
renderCustom: function (swiper, current, total) {
let zero = total > 9 ? '' : '0';
let index = zero + current
let all = zero + total
let html = `<div class="mt-slider-pagination">
<span>${index}</span>
<span>${all}</span>
</div>`;
return html;
}
},
autoplay: {
delay: 2500,
disableOnInteraction: false
},
on: {
autoplayTimeLeft(s, time, progress) {
progressBar.css({
"transform": `scaleX(calc(1 - ${progress}))`
})
}
},
});
})(jQuery);