VanillaJS Slideshow Test

VanillaJS slideshow made during NYC CSS/UX Meetup

by Dylan Schadeck

HTML

<div id="parent">
    <div id="child">
        <img src="http://placehold.it/300x250/900/fff&text=[1]" alt=""/>
        <img src="http://placehold.it/300x250/090/fff&text=[2]" alt=""/>
        <img src="http://placehold.it/300x250/039/fff&text=[3]" alt=""/>
        <img src="http://placehold.it/300x250/999/fff&text=[4]" alt=""/>
        <img src="http://placehold.it/300x250/900/fff&text=[5]" alt=""/>
        <img src="http://placehold.it/300x250/090/fff&text=[6]" alt=""/>
    </div>
</div>
<button class="prev" id="prev"><</button>
<button class="next" id="next">></button>

CSS

body { width: 300px; margin: 0 auto; }

#parent { width: 300px; height: 250px; margin: 2em auto; overflow: hidden; box-shadow: 1px 1px  3px rgba(0,0,0,.5); }

#child { width: 1800px; height: 250px; -webkit-transition: margin .3s; -moz-transition: margin .3s; transition: margin .3s; }
		
#child img { float: left; }
		
#prev { float: left; }
		
#next { float: right; }
		
#prev, #next { background: #333; color: #fff; border: 0; padding: 2em; border-radius: .5em; font-weight: bold; text-shadow: 1px 1px rgba(0,0,0,.5); box-shadow: 1px 1px  3px rgba(0,0,0,.5); }
		
#prev:hover, #next:hover { background: #555; }
		
#prev:active, #next:active { background: #ace; box-shadow: 0px 0px  1px rgba(0,0,0,.5); margin: 4px 0 0 3px; }

JavaScript

// define variables
var vis = 0;
var imgWidth = 300;
var childBox = document.getElementById("child");
var childLength = (childBox.getElementsByTagName("img").length) * imgWidth;

// event - next
document.getElementById('next').addEventListener('click', function() {
      vis = vis - imgWidth;
      console.log(vis);
      if ( vis <= -childLength) {
        vis = -childLength + imgWidth;
      } else {
        childBox.style.marginLeft= vis + 'px';
      }
    });

// event - previous
document.getElementById('prev').addEventListener('click', function() {
      vis = vis + imgWidth;
      console.log(vis);
      if ( vis > 0) {
        vis = 0;
      } else {
        childBox.style.marginLeft= vis + 'px';
      }
  });