https://www.pocos10.com.br/hero/js/main.js

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