travel2.html

<!DOCTYPE html>
<html>
<head>
	<script src="splide-2.4.20/dist/js/splide.min.js"></script>
	<link rel="stylesheet" href="splide-2.4.20/dist/css/splide.min.css">

	<div id="secondary-slider" class="splide">
	<div class="splide__track">
		<ul class="splide__list">

 		    
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/DSC02959.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/DSC02966.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/DSC02996.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/DSC03009.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0416.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0431.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0462.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0464.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0497.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0509.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0637.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0857.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0886.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P5070957.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P5190951.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P5190955.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6100004.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6100009.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6100119.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6110188.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6110189.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6150318.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6150386.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6190422.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6260496.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6280537.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6290601.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6290615.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P7050639.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9030210.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9050277.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9050304.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9050310.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9090400.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9130600.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9150619.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9190825.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9190852.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9210879.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/aata.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/aata2.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/boothakola.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/boothakolaa.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/connor.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/damn_fly.jpg/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/hampi.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/puks1.JPG/thumbs" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/puks2.JPG/thumbs" >
    		</li>
			

		</ul>
	</div>
</div>


 	<div id="primary-slider" class="splide">
	<div class="splide__track">
		<ul class="splide__list">
	 	  
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/DSC02959.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/DSC02966.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/DSC02996.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/DSC03009.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0416.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0431.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0462.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0464.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0497.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0509.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0637.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0857.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/IMG_0886.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P5070957.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P5190951.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P5190955.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6100004.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6100009.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6100119.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6110188.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6110189.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6150318.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6150386.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6190422.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6260496.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6280537.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6290601.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P6290615.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P7050639.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9030210.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9050277.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9050304.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9050310.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9090400.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9130600.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9150619.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9190825.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9190852.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/P9210879.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/aata.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/aata2.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/boothakola.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/boothakolaa.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/connor.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/damn_fly.jpg/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/hampi.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/puks1.JPG/full" >
    		</li>
			
  			  <li class="splide__slide"> 
  			      	<img src="/assets/images/travel/full/puks2.JPG/full" >
    		</li>
			
 		    		
 		 </ul>
	</div>
</div>


<script>


document.addEventListener( 'DOMContentLoaded', function () {
	var secondarySlider = new Splide( '#secondary-slider', {
		fixedWidth  : 100,
		height      : 100,
		gap         : 20,
		cover       : true,
		isNavigation: true,
		perPage: 5,
		focus       : 'center',
		breakpoints : {
			'600': {
				fixedWidth: 66,
				height    : 40,
			}
		},
	} ).mount();
	
	var primarySlider = new Splide( '#primary-slider', {
		type       : 'fade',
		cover     : true,
		heightRatio: 0.6,
		pagination : false,
		arrows     : false,
		cover      : true,
	} ); // do not call mount() here.
	
	primarySlider.sync( secondarySlider ).mount();
} );


</script>