AppyKit - Features

// features-2
(function features_2() {
	$('.flying-tabs .flying-child').on('click', function () {
		var tab_id = $(this).attr('data-tab');

		$(this).siblings('.flying-child').removeClass('is-active');
		$(this).closest('.flying-wrapper').find('.flying-tabs-content').children('.tab-content').removeClass('is-active');

		$(this).addClass('is-active');
		$("#" + tab_id).addClass('is-active');
	})
})();							
							

// features-13 start
function features13HorizontalScroll() {

	// matchMedia start
	if (window.matchMedia('(min-width: 991px)').matches) {

		let trackScroller = document.getElementById('trackScroller');
		let track = document.getElementById('track');
		let trackItems = document.querySelectorAll('.features-13-contentWrapper');
		let trackWidth;

		try {
			track.style.transformStyle = 'preserve-3d';
			track.style.willChange = 'transform';
		}
		
		catch (err) {
			return false
		}
		

		for (let i = 0; i < trackItems.length; i++) {
			trackWidth = track.offsetWidth * i;
			trackScroller.style.height = (trackWidth / i) * (i) + 'px';
		}

		// on scroll start
		window.onscroll = function () {

			try {

				let fromTop = trackScroller.getBoundingClientRect().top;

				if (fromTop < 0) {
					track.style.transform =
					track.style.WebkitTransform =
					track.style.MsTransform = 'translate3d(' + fromTop * 1.5 + 'px,' + '0px,' + '0px' + ')';
				}

				if (Math.abs(fromTop) > (trackWidth / 1.5) && fromTop < 0) {
						track.style.transform =
						track.style.WebkitTransform =
						track.style.MsTransform = 'translate3d(' + '-' + trackWidth + 'px,' + '0px' + ',0px' + ')';
				}

			}catch (err){
				//test
				return false
			}

		}
		// on scroll end

	}
	//matchMedia end

}features13HorizontalScroll();
// features-13 end								
							

// features-17 swiper start
$(document).ready(function() {

	'use strict';

	var galleryThumbs = new Swiper('.gallery-thumbs', {
		spaceBetween: 10,
		slidesPerView: 4,
		freeMode: true,
		watchSlidesVisibility: true,
		watchSlidesProgress: true,
	});
	var galleryTop = new Swiper('.gallery-top', {
		spaceBetween: 10,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		thumbs: {
			swiper: galleryThumbs
		}
	});

});
// features-17 swiper end
							

// features-20 start
function features20Sliders(){

	var swiper = new Swiper('.features-20__swiperContainer-1', {
		spaceBetween: 0,
		centeredSlides: true,
		autoplay: {
			delay: 2500,
			disableOnInteraction: false,
		},
		slidesPerView: 1,
		loop: true
	});

	var swiper = new Swiper('.features-20__swiperContainer-2', {
		spaceBetween: 0,
		centeredSlides: true,
		autoplay: {
			delay: 3500,
			disableOnInteraction: false,
		},
		slidesPerView: 1,
		loop: true
	});

	var swiper = new Swiper('.features-20__swiperContainer-3', {
		spaceBetween: 0,
		centeredSlides: true,
		autoplay: {
			delay: 1500,
			disableOnInteraction: false,
		},
		slidesPerView: 1,
		loop: true
	});

};features20Sliders()
// features-20 end
							

// features-21 start---------------------------
function features_21(){

	let card = document.querySelectorAll('.features-21__card');
	let content = document.querySelectorAll('.features-21__content');

	for (let i = 0; i < card.length; i++) {
		
		card[i].addEventListener('click', function(){

			// remove active class
			for(let i = 0; i < card.length; i++) {
				if(card[i].classList.contains('active')){
					card[i].classList.remove('active');
					content[i].classList.remove('active')
				}
			}
			// add active class
			this.classList.add('active')
			content[i].classList.add('active')
		
		});

	}

}features_21();
// features-21 end---------------------------