Nation Library - Slideshow showSlide example

Demonstrates the 'showSlide' method of NATION.Slideshow

by NationStudio

HTML

<script src="https://techdocs.wearenation.co.uk/nation/Utils.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/Animation.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/EventDispatcher.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/Slideshow.js"></script>
<div class="js-slideshow">
  <div class="js-slide">
   
  </div>
  <div class="js-slide">
  
  </div>
  <div class="js-slide">
  
  </div>
  <div class="js-slide">
  
  </div>
</div>

<a href="#" class="slide-3">Show slide 3</a>
<a href="#" class="slide-4">Show slide 4</a>

CSS

.js-slideshow {
  position: relative;
  width: 50%;
  overflow: hidden;
}

.js-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: #0D398B;
}
.js-slide:first-child {
  position: relative;
}
.js-slide:nth-child(2) {
  background: #0C54D9;
}
.js-slide:nth-child(3) {
  background: #7ff6d1;
}
.js-slide:nth-child(4) {
  background: #5dc3a3;
}

JavaScript

// Element containing slides that have a class of either 'js-slide' or 'slide'
var element = document.documentElement.querySelector(".js-slideshow");

// Choice of 'slide' or 'fade' transition styles (defaults to fade)
var options = {
  slide: true,
  easing: "easeInOutQuad"
}

// Instantiate the slideshow with the above options
var slideshow = new NATION.Slideshow(element, options);

// Show the third slide when 'slide 3' is clicked
document.documentElement.querySelector(".slide-3").addEventListener("click", function(e) {
	// Note that slideID is zero-indexed
	slideshow.showSlide(2);
});

// Show the fourth slide when 'slide 4' is clicked
document.documentElement.querySelector(".slide-4").addEventListener("click", function(e) {
	// Note that slideID is zero-indexed
	slideshow.showSlide(3);
});