KwGEwg

index.html

<div class="slides test" tabindex="1" autofocus="autofocus">
            <figure>
		      <img src="http://andshecodes2.com/slideshow/images/flowers2.jpg" width="90%" /><figcaption>Field of Flowers</figcaption> 
            </figure>
            <figure>
		      <img src="http://andshecodes2.com/slideshow/images/flowers4.jpg" width="90%" /><figcaption>Daisies</figcaption>
            </figure>
            <figure>
		      <img src="http://andshecodes2.com/slideshow/images/flowers5.jpg" width="90%" /><figcaption>Roses</figcaption> 
            </figure>
            <figure>
		      <img src="http://andshecodes2.com/slideshow/images/flowers6.jpg" width="90%" /><figcaption>Pink Daisies</figcaption> 
            </figure>
            <figure>
		      <img src="http://andshecodes2.com/slideshow/images/flowers8.jpg" width="90%" /><figcaption>White Daisies</figcaption> 
            </figure>
        </div> 

KwGEwg.markdown

KwGEwg

A Pen by Tomi on CodePen.

License.

script.js

var jsSlider = function (el, options) {
    var $slideshows = document.querySelectorAll(el), // a collection of all of the slideshow
        $slideshow = {},
        Slideshow = {
            init: function (el, options) {
                this.counter = 0; 
                this.el = el; 
                this.$items = el.querySelectorAll('figure'); 
                this.numItems = this.$items.length; 
                options = options || {}; 
                options.auto = options.auto || false; 
                this.opts = {
                    auto: (typeof options.auto === "undefined") ? false : options.auto,
                    speed: (typeof options.auto.speed === "undefined") ? 1500 : options.auto.speed,
                    pauseOnHover: (typeof options.auto.pauseOnHover === "undefined") ? false : options.auto.pauseOnHover,
                };
                
                this.$items[0].classList.add('show'); // add show class to first figure 
                this.injectControls(el);
                this.addEventListeners(el);
                if (this.opts.auto) {
                    this.autoCycle(this.el, this.opts.speed, this.opts.pauseOnHover);
                }
            },
            showCurrent: function (i) {
                // increment or decrement this.counter depending on whether i === 1 or i === -1
                if (i > 0) {
                    this.counter = (this.counter + 1 === this.numItems) ? 0 : this.counter + 1;
                } else {
                    this.counter = (this.counter - 1 < 0) ? this.numItems - 1 : this.counter - 1;
                }

                // remove .show from whichever element currently has it 
                [].forEach.call(this.$items, function (el) {
                    el.classList.remove('show');
                });
  
                // add .show to the one item that's supposed to have it
                this.$items[this.counter].classList.add('show');
            },
            injectControls: function (el) {
            // build and inject prev/next controls
                // first create all the new elements
                var spanPrev = document.createElement("span"),
                    spanNext = document.createElement("span"),
                    docFrag = document.createDocumentFragment();
        
                spanPrev.classList.add('prev');
                spanNext.classList.add('next');
        
                spanPrev.innerHTML = '&laquo;';
                spanNext.innerHTML = '&raquo;';
                
                docFrag.appendChild(spanPrev);
                docFrag.appendChild(spanNext);
                el.appendChild(docFrag);
            },
            addEventListeners: function (el) {
                var that = this;
                el.querySelector('.next').addEventListener('click', function () {
                    that.showCurrent(1); // increment & show
                }, false);
            
                el.querySelector('.prev').addEventListener('click', function () {
                    that.showCurrent(-1); // decrement & show
                }, false);
                
                el.onkeydown = function (e) {
                    e = e || window.event;
                    if (e.keyCode === 37) {
                        that.showCurrent(-1); // decrement & show
                    } else if (e.keyCode === 39) {
                        that.showCurrent(1); // increment & show
                    }
                };
            },
            autoCycle: function (el, speed, pauseOnHover) {
                var that = this,
                    interval = window.setInterval(function () {
                        that.showCurrent(1); // increment & show
                    }, speed);
                
                if (pauseOnHover) {
                    el.addEventListener('mouseover', function () {
                        interval = clearInterval(interval);
                    }, false);
                    el.addEventListener('mouseout', function () {
                        interval = window.setInterval(function () {
                            that.showCurrent(1); // increment & show
                        }, speed);
                    }, false);
                } // end pauseonhover
                
            }
            
        }; // end Slideshow object 
        
    // make instances of Slideshow as needed
    [].forEach.call($slideshows, function (el) {
        $slideshow = Object.create(Slideshow);
        $slideshow.init(el, options);
    });
};
var opts = {
    auto : {
        speed : 5000, 
        pauseOnHover : true
    }
};
jsSlider('.test', opts);

style.scss

				$fontface: sans-serif;
			$black: #000;
			$white: #fff;



	body{
		background: $black;
		font: 100% $fontface;
	
		}
	.slides{
		background: $black;
		position: relative;
		display: block; 


		figure{
			position: absolute;
			top: 0;
			width: 100%;

		:first-child{
				position: relative;
				}
      
			img{
				opacity: 0;
				-webkit-transition: opacity 1.2s;
				transition: opacity 1.2s;
				position: relative;
			}
		}
		.show {
			z-index: 3;
			img{
				opacity: 1;
			}
		}
		.show figcaption{
			z-index: 2;
			opacity: 1;
		}

		figcaption{
			position: absolute;
			font: .8em $fontface;
			bottom: .75em;
			right: 20px;
			padding: .25em;
			color: #fff;
			background: $black;
			background: rgba(0,0,0, .25);
			border-radius: 2px;
			opacity: 0;
			-webkit-transition: opacity 1.2s;
			transition: opacity 1.2s;

		}
		.next, .prev{
			color: $white;
			position: absolute;
			background: $black;
			background: rgba(0,0,0, .6);
			top: 50%;
			z-index: 4;
			font-size: 2em;
			margin-top: -1.2em;
			opacity: .5;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;

			}
		.next:hover, .prev:hover{
			cursor: pointer;
			opacity: 1;
		}
		.next{
			right: 0;
			padding: 10px 5px 15px 10px;
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
			}
				
		.prev{
			left: 0;
			padding: 10px 10px 15px 5px;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			}

	}