swiper and clean
This commit is contained in:
@@ -130,40 +130,6 @@ function rakar_content_load_scripts() {
|
||||
});
|
||||
});
|
||||
|
||||
/*---------- 05. Scroll To Top ----------*/
|
||||
if ($('.scroll-top').length > 0) {
|
||||
|
||||
var scrollTopbtn = document.querySelector('.scroll-top');
|
||||
var progressPath = document.querySelector('.scroll-top path');
|
||||
var pathLength = progressPath.getTotalLength();
|
||||
progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
|
||||
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
|
||||
progressPath.style.strokeDashoffset = pathLength;
|
||||
progressPath.getBoundingClientRect();
|
||||
progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';
|
||||
var updateProgress = function () {
|
||||
var scroll = $(window).scrollTop();
|
||||
var height = $(document).height() - $(window).height();
|
||||
var progress = pathLength - (scroll * pathLength / height);
|
||||
progressPath.style.strokeDashoffset = progress;
|
||||
}
|
||||
updateProgress();
|
||||
$(window).scroll(updateProgress);
|
||||
var offset = 50;
|
||||
var duration = 750;
|
||||
jQuery(window).on('scroll', function() {
|
||||
if (jQuery(this).scrollTop() > offset) {
|
||||
jQuery(scrollTopbtn).addClass('show');
|
||||
} else {
|
||||
jQuery(scrollTopbtn).removeClass('show');
|
||||
}
|
||||
});
|
||||
jQuery(scrollTopbtn).on('click', function(event) {
|
||||
event.preventDefault();
|
||||
jQuery('html, body').animate({scrollTop: 0}, duration);
|
||||
return false;
|
||||
})
|
||||
}
|
||||
|
||||
/*---------- 06. Set Background Image Color & Mask ----------*/
|
||||
if ($("[data-bg-src]").length > 0) {
|
||||
@@ -200,85 +166,6 @@ function rakar_content_load_scripts() {
|
||||
};
|
||||
|
||||
|
||||
/*----------- 07. Global Slider ----------*/
|
||||
$('.th-slider').each(function () {
|
||||
|
||||
var thSlider = $(this);
|
||||
var settings = $(this).data('slider-options');
|
||||
|
||||
// Store references to the navigation Slider
|
||||
var prevArrow = thSlider.find('.slider-prev');
|
||||
var nextArrow = thSlider.find('.slider-next');
|
||||
var paginationElN = thSlider.find('.slider-pagination.pagi-number');
|
||||
var paginationExternel = thSlider.siblings('.slider-controller').find('.slider-pagination');
|
||||
|
||||
var paginationEl = paginationExternel.length ? paginationExternel.get(0) : thSlider.find('.slider-pagination').get(0);
|
||||
|
||||
var paginationType = settings['paginationType'] ? settings['paginationType'] : 'bullets';
|
||||
|
||||
var autoplayconditon = settings['autoplay'];
|
||||
|
||||
var sliderDefault = {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: settings['spaceBetween'] ? settings['spaceBetween'] : 24,
|
||||
loop: settings['loop'] == false ? false : true,
|
||||
speed: settings['speed'] ? settings['speed'] : 1000,
|
||||
autoplay: autoplayconditon ? autoplayconditon : {delay: 6000, disableOnInteraction: false},
|
||||
navigation: {
|
||||
nextEl: nextArrow.get(0),
|
||||
prevEl: prevArrow.get(0),
|
||||
},
|
||||
pagination: {
|
||||
el: paginationEl,
|
||||
type: paginationType,
|
||||
clickable: true,
|
||||
renderBullet: function (index, className) {
|
||||
var number = index + 1;
|
||||
var formattedNumber = number < 10 ? '0' + number : number;
|
||||
if (paginationElN.length) {
|
||||
return '<span class="' + className + ' number">' + formattedNumber + '</span>';
|
||||
} else {
|
||||
return '<span class="' + className + '" aria-label="Go to Slide ' + formattedNumber + '"></span>';
|
||||
}
|
||||
},
|
||||
formatFractionCurrent: function (number) {
|
||||
if (number < 10) {
|
||||
return '0' + number;
|
||||
} else {
|
||||
return number;
|
||||
}
|
||||
},
|
||||
formatFractionTotal: function (number) {
|
||||
if (number < 10) {
|
||||
return '0' + number;
|
||||
} else {
|
||||
return number;
|
||||
}
|
||||
}
|
||||
},
|
||||
on: {
|
||||
slideChange: function() {
|
||||
setTimeout(function () {
|
||||
swiper.params.mousewheel.releaseOnEdges = false;
|
||||
}, 500);
|
||||
},
|
||||
reachEnd: function() {
|
||||
setTimeout(function () {
|
||||
swiper.params.mousewheel.releaseOnEdges = true;
|
||||
}, 750);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var options = JSON.parse(thSlider.attr('data-slider-options'));
|
||||
options = $.extend({}, sliderDefault, options);
|
||||
var swiper = new Swiper(thSlider.get(0), options); // Assign the swiper variable
|
||||
|
||||
if ($('.slider-area').length > 0) {
|
||||
$('.slider-area').closest(".container").parent().addClass("arrow-wrap");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Function to add animation classes
|
||||
function animationProperties() {
|
||||
@@ -294,109 +181,8 @@ function rakar_content_load_scripts() {
|
||||
}
|
||||
animationProperties();
|
||||
|
||||
// Add click event handlers for external slider arrows based on data attributes
|
||||
$('[data-slider-prev], [data-slider-next]').on('click', function () {
|
||||
var sliderSelector = $(this).data('slider-prev') || $(this).data('slider-next');
|
||||
var targetSlider = $(sliderSelector);
|
||||
|
||||
if (targetSlider.length) {
|
||||
var swiper = targetSlider[0].swiper;
|
||||
|
||||
if (swiper) {
|
||||
if ($(this).data('slider-prev')) {
|
||||
swiper.slidePrev();
|
||||
} else {
|
||||
swiper.slideNext();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/*-------------- 08. Slider Tab -------------*/
|
||||
$.fn.activateSliderThumbs = function (options) {
|
||||
var opt = $.extend(
|
||||
{
|
||||
sliderTab: false,
|
||||
tabButton: ".tab-btn",
|
||||
},
|
||||
options
|
||||
);
|
||||
|
||||
return this.each(function () {
|
||||
var $container = $(this);
|
||||
var $thumbs = $container.find(opt.tabButton);
|
||||
var $line = $('<span class="indicator"></span>').appendTo($container);
|
||||
|
||||
var sliderSelector = $container.data("slider-tab");
|
||||
var $slider = $(sliderSelector);
|
||||
|
||||
var swiper = $slider[0].swiper;
|
||||
|
||||
$thumbs.on("click", function (e) {
|
||||
e.preventDefault();
|
||||
var clickedThumb = $(this);
|
||||
|
||||
clickedThumb.addClass("active").siblings().removeClass("active");
|
||||
linePos(clickedThumb, $container);
|
||||
|
||||
clickedThumb.prevAll(opt.tabButton).addClass('list-active');
|
||||
clickedThumb.nextAll(opt.tabButton).removeClass('list-active');
|
||||
|
||||
if (opt.sliderTab) {
|
||||
var slideIndex = clickedThumb.index();
|
||||
swiper.slideTo(slideIndex);
|
||||
}
|
||||
});
|
||||
|
||||
if (opt.sliderTab) {
|
||||
swiper.on("slideChange", function () {
|
||||
var activeIndex = swiper.realIndex;
|
||||
var $activeThumb = $thumbs.eq(activeIndex);
|
||||
|
||||
$activeThumb.addClass("active").siblings().removeClass("active");
|
||||
linePos($activeThumb, $container);
|
||||
|
||||
$activeThumb.prevAll(opt.tabButton).addClass('list-active');
|
||||
$activeThumb.nextAll(opt.tabButton).removeClass('list-active');
|
||||
});
|
||||
|
||||
var initialSlideIndex = swiper.activeIndex;
|
||||
var $initialThumb = $thumbs.eq(initialSlideIndex);
|
||||
$initialThumb.addClass("active").siblings().removeClass("active");
|
||||
linePos($initialThumb, $container);
|
||||
|
||||
$initialThumb.prevAll(opt.tabButton).addClass('list-active');
|
||||
$initialThumb.nextAll(opt.tabButton).removeClass('list-active');
|
||||
}
|
||||
|
||||
function linePos($activeThumb) {
|
||||
var thumbOffset = $activeThumb.position();
|
||||
|
||||
var marginTop = parseInt($activeThumb.css('margin-top')) || 0;
|
||||
var marginLeft = parseInt($activeThumb.css('margin-left')) || 0;
|
||||
|
||||
$line.css("--height-set", $activeThumb.outerHeight() + "px");
|
||||
$line.css("--width-set", $activeThumb.outerWidth() + "px");
|
||||
$line.css("--pos-y", thumbOffset.top + marginTop + "px");
|
||||
$line.css("--pos-x", thumbOffset.left + marginLeft + "px");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if ($(".testi-box-tab").length) {
|
||||
$(".testi-box-tab").activateSliderThumbs({
|
||||
sliderTab: true,
|
||||
tabButton: ".tab-btn",
|
||||
});
|
||||
}
|
||||
|
||||
if ($(".product-thumb").length) {
|
||||
$(".product-thumb").activateSliderThumbs({
|
||||
sliderTab: true,
|
||||
tabButton: ".tab-btn",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/*----------- 09. Ajax Contact Form ----------*/
|
||||
@@ -449,49 +235,6 @@ function rakar_content_load_scripts() {
|
||||
midClick: true,
|
||||
});
|
||||
|
||||
/*---------- 12. Section Position ----------*/
|
||||
// Interger Converter
|
||||
function convertInteger(str) {
|
||||
return parseInt(str, 10);
|
||||
}
|
||||
|
||||
$.fn.sectionPosition = function (mainAttr, posAttr) {
|
||||
$(this).each(function () {
|
||||
var section = $(this);
|
||||
|
||||
function setPosition() {
|
||||
var sectionHeight = Math.floor(section.height() / 2), // Main Height of section
|
||||
posData = section.attr(mainAttr), // where to position
|
||||
posFor = section.attr(posAttr), // On Which section is for positioning
|
||||
topMark = "top-half", // Pos top
|
||||
bottomMark = "bottom-half", // Pos Bottom
|
||||
parentPT = convertInteger($(posFor).css("padding-top")), // Default Padding of parent
|
||||
parentPB = convertInteger($(posFor).css("padding-bottom")); // Default Padding of parent
|
||||
|
||||
if (posData === topMark) {
|
||||
$(posFor).css(
|
||||
"padding-bottom",
|
||||
parentPB + sectionHeight + "px"
|
||||
);
|
||||
section.css("margin-top", "-" + sectionHeight + "px");
|
||||
} else if (posData === bottomMark) {
|
||||
$(posFor).css(
|
||||
"padding-top",
|
||||
parentPT + sectionHeight + "px"
|
||||
);
|
||||
section.css("margin-bottom", "-" + sectionHeight + "px");
|
||||
}
|
||||
}
|
||||
setPosition(); // Set Padding On Load
|
||||
});
|
||||
};
|
||||
|
||||
var postionHandler = "[data-sec-pos]";
|
||||
if ($(postionHandler).length) {
|
||||
$(postionHandler).imagesLoaded(function () {
|
||||
$(postionHandler).sectionPosition("data-sec-pos", "data-pos-for");
|
||||
});
|
||||
}
|
||||
|
||||
/*----------- 13. Filter ----------*/
|
||||
$(".filter-active").imagesLoaded(function () {
|
||||
@@ -553,11 +296,6 @@ function rakar_content_load_scripts() {
|
||||
time: 1000,
|
||||
});
|
||||
|
||||
/*----------- 15. Hover Item ----------*/
|
||||
$(".hover-item").hover(function() {
|
||||
$(this).addClass("item-active");
|
||||
$(this).siblings().removeClass("item-active");
|
||||
});
|
||||
|
||||
/*----------- 16. Shape Mockup ----------*/
|
||||
$.fn.shapeMockup = function () {
|
||||
@@ -589,44 +327,6 @@ function rakar_content_load_scripts() {
|
||||
|
||||
|
||||
|
||||
/*----------- 21. Overlay Direction ----------*/
|
||||
if ($('.overlay-direction').length > 0) {
|
||||
if (window.innerWidth > 767) {
|
||||
const nodes = [].slice.call(document.querySelectorAll(".overlay-direction .filter-item"), 0);
|
||||
const directions = {
|
||||
0: "top",
|
||||
1: "right",
|
||||
2: "bottom",
|
||||
3: "left"
|
||||
};
|
||||
const classNames = ["in", "out"].map(p => Object.values(directions).map(d => `${p}-${d}`)).reduce((a, b) => a.concat(b));
|
||||
const getDirectionKey = (ev, node) => {
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
top,
|
||||
left
|
||||
} = node.getBoundingClientRect();
|
||||
const l = ev.pageX - (left + window.pageXOffset);
|
||||
const t = ev.pageY - (top + window.pageYOffset);
|
||||
const x = l - width / 2 * (width > height ? height / width : 1);
|
||||
const y = t - height / 2 * (height > width ? width / height : 1);
|
||||
return Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;
|
||||
};
|
||||
class Item {
|
||||
constructor(element) {
|
||||
this.element = element;
|
||||
this.element.addEventListener("mouseover", ev => this.update(ev, "in"));
|
||||
this.element.addEventListener("mouseout", ev => this.update(ev, "out"));
|
||||
}
|
||||
update(ev, prefix) {
|
||||
this.element.classList.remove(...classNames);
|
||||
this.element.classList.add(`${prefix}-${directions[getDirectionKey(ev, this.element)]}`);
|
||||
}
|
||||
}
|
||||
nodes.forEach(node => new Item(node));
|
||||
}
|
||||
}
|
||||
|
||||
/*----------- 22. Indicator ----------*/
|
||||
// Indicator
|
||||
@@ -688,12 +388,6 @@ function rakar_content_load_scripts() {
|
||||
}
|
||||
|
||||
|
||||
/*----------- 20. image Slider ----------*/
|
||||
$("#compslider").on("input change", (e) => {
|
||||
const sliderPos = e.target.value;
|
||||
$('.foreground-img').css('width', `${sliderPos}%`)
|
||||
$('.slider-button').css('left', `calc(${sliderPos}% - 32px)`)
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -750,18 +444,6 @@ function rakar_content_load_scripts() {
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
/*---------- Sticky Footer ----------*/
|
||||
function checkHeight() {
|
||||
if ($('body').height() < $(window).height()) {
|
||||
$('.footer-sitcky').addClass('sticky-footer');
|
||||
} else {
|
||||
$('.footer-sitcky').removeClass('sticky-footer');
|
||||
}
|
||||
}
|
||||
|
||||
$(window).on('load resize', function () {
|
||||
checkHeight();
|
||||
});
|
||||
|
||||
// Elementor Frontend Load
|
||||
$(window).on('elementor/frontend/init', function () {
|
||||
|
||||
Reference in New Issue
Block a user