SliderSync Module

Synchronizes a Swiper slider with earth locations. You can modify the code for use with other slider libraries.

Example: Sync with Slider

Usage

Load the file /modules/miniature.earth.scrollsync.js or copy the code to your script and customize it to your needs.

Methods

Earth.SliderSync.enable( earth, slider, activate )

earth
(EarthInstance) Reference to the earth
slider
(Swiper) Slider instance
You can add data attributes to the slides and access them during the activate callback.
activate
(function) Callback function to handle the change of the active slide.
The first parameter gives you the activated slide.
The second parameter gives you the deactivated slide. 
myearth.addEventListener( "ready", function() {
	
	var elements = [];
	
	document.querySelectorAll('.sections').forEach( function(item) {

		var latlng = item.dataset.location.split(',');
	
		var marker = myearth.addMarker( {
			location : { lat: latlng[0], lng: latlng[1] }				
		} );
	
		elements.push( {
			element : item,
			location : { lat: latlng[0], lng: latlng[1] },
			marker : marker	// custom variable
		} );
		
	} );
	
	
	Earth.SliderSync.enable(
		// earth
		myearth,
		
		// container
		document.documentElement,
		
		// elements
		elements,
		
		// activate
		function(new_element, old_element) {
			if (new_element) {
				new_element.marker.color = 'green';
				new_element.element.classList.add('active');
			}
			if (old_element) {
				old_element.marker.color = 'red';
				old_element.element.classList.remove('active');
			}
		}
	);

} );