https://prosperotree.com/js/hero-slider.js

1(function () {
2		"use strict";
3	var slidesWrapper = $('.cd-hero-slider');
4
5	//check if a .cd-hero-slider exists in the DOM 
6	if ( slidesWrapper.length > 0 ) {
7		var primaryNav = $('.cd-primary-nav'),
8			sliderNav = $('.cd-slider-nav'),
9			navigationMarker = $('.cd-marker'),
10			slidesNumber = slidesWrapper.children('li').length,
11			visibleSlidePosition = 0,
12			autoPlayId,
13			autoPlayDelay = 5000000;
14
15		//upload videos (if not on mobile devices)
16		uploadVideo(slidesWrapper);
17
18		//autoplay slider
19		setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);
20
21		//on mobile - open/close primary navigation clicking/tapping the menu icon
22		primaryNav.on('click', function(event){
23			if($(event.target).is('.cd-primary-nav')) $(this).children('ul').toggleClass('is-visible');
24		});
25		
26		//change visible slide
27		sliderNav.on('click', 'li', function(event){
28			event.preventDefault();
29			var selectedItem = $(this);
30			if(!selectedItem.hasClass('selected')) {
31				// if it's not already selected
32				var selectedPosition = selectedItem.index(),
33					activePosition = slidesWrapper.find('li.selected').index();
34				
35				if( activePosition < selectedPosition) {
36					nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
37				} else {
38					prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
39				}
40
41				//this is used for the autoplay
42				visibleSlidePosition = selectedPosition;
43
44				updateSliderNavigation(sliderNav, selectedPosition);
45				updateNavigationMarker(navigationMarker, selectedPosition+1);
46				//reset autoplay
47				setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);
48			}
49		});
50	}
51
52	function nextSlide(visibleSlide, container, pagination, n){
53		visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
54			visibleSlide.removeClass('is-moving');
55		});
56
57		container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
58		checkVideo(visibleSlide, container, n);
59	}
60
61	function prevSlide(visibleSlide, container, pagination, n){
62		visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
63			visibleSlide.removeClass('is-moving');
64		});
65
66		container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');
67		checkVideo(visibleSlide, container, n);
68	}
69
70	function updateSliderNavigation(pagination, n) {
71		var navigationDot = pagination.find('.selected');
72		navigationDot.removeClass('selected');
73		pagination.find('li').eq(n).addClass('selected');
74	}
75
76	function setAutoplay(wrapper, length, delay) {
77		if(wrapper.hasClass('autoplay')) {
78			clearInterval(autoPlayId);
79			autoPlayId = window.setInterval(function(){autoplaySlider(length)}, delay);
80		}
81	}
82
83	function autoplaySlider(length) {
84		if( visibleSlidePosition < length - 1) {
85			nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1);
86			visibleSlidePosition +=1;
87		} else {
88			prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0);
89			visibleSlidePosition = 0;
90		}
91		updateNavigationMarker(navigationMarker, visibleSlidePosition+1);
92		updateSliderNavigation(sliderNav, visibleSlidePosition);
93	}
94
95	function uploadVideo(container) {
96		container.find('.cd-bg-video-wrapper').each(function(){
97			var videoWrapper = $(this);
98			if( videoWrapper.is(':visible') ) {
99				// if visible - we are not on a mobile device 
100				var	videoUrl = videoWrapper.data('video'),
101					video = $('<video loop><source src="'+videoUrl+'.mp4" type="video/mp4" /><source src="'+videoUrl+'.webm" type="video/webm" /></video>');
102				video.appendTo(videoWrapper);
103				// play video if first slide
104				if(videoWrapper.parent('.cd-bg-video.selected').length > 0) video.get(0).play();
105			}
106		});
107	}
108
109	function checkVideo(hiddenSlide, container, n) {
110		//check if a video outside the viewport is playing - if yes, pause it
111		var hiddenVideo = hiddenSlide.find('video');
112		if( hiddenVideo.length > 0 ) hiddenVideo.get(0).pause();
113
114		//check if the select slide contains a video element - if yes, play the video
115		var visibleVideo = container.children('li').eq(n).find('video');
116		if( visibleVideo.length > 0 ) visibleVideo.get(0).play();
117	}
118
119	function updateNavigationMarker(marker, n) {
120		marker.removeClassPrefix('item').addClass('item-'+n);
121	}
122
123	$.fn.removeClassPrefix = function(prefix) {
124		//remove all classes starting with 'prefix'
125	    this.each(function(i, el) {
126	        var classes = el.className.split(" ").filter(function(c) {
127	            return c.lastIndexOf(prefix, 0) !== 0;
128	        });
129	        el.className = $.trim(classes.join(" "));
130	    });
131	    return this;
132	};
133})(jQuery);