Simple Slider

by Kevin Pliester

HTML

<div class="container">

  <div id="slider">

    <div class="slide"><span>1</span></div>
    <div class="slide"><span>2</span></div>
    <div class="slide"><span>3</span></div>
    <div class="slide"><span>4</span></div>

    <div class="slide-button previous">
      Zurück
    </div>

    <div class="slide-button next">
      Weiter
    </div>
    
    <div class="dots">
    </div>

  </div>

</div>

SCSS

.container {
  margin: 5% auto;
  max-width: 600px;
  background: #ddd;
}

#slider {
  position: relative;
  .slide {
    color: white;
    background: red;
    display: none;
    height: 300px;
    width: 100%;
    z-index: 2;
    cursor: move;
    span {
      position: absolute;
      font-size: 300%;
      line-height: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%);
    }
    &.active {
      display: block;
    }
  }
  .slide-button {
    color: #fff;
    cursor: pointer;
    position: absolute;
    z-index: 3;
    transform: translateY(-50%);
    &.previous {
      top: 50%;
      left: 25px;
    }
    &.next {
      top: 50%;
      right: 25px;
    }
  }
  .dots {
    z-index: 3;
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    .dot {
      height: 15px;
      width: 15px;
      background: #333;
      border-radius: 100%;
      display: inline-block;
      margin-right: 5px;
      &.active {
        background-color: red;
      }
    }
  }
}

JavaScript

/**
 * Simple jQuery Slider
 *
 * Author: Devhats
 * Version: 1.0
 */
(function($) {

  $.fn.extend({

		// slider name
    maschineSlider: function(options) {

			// slider default
      var defaults = {
      	slide: '.slide',
        active: '.active',
        nextButton: '.next',
        prevButton: '.previous',
        dots: '.dots'
      }

      var options = $.extend(defaults, options);

      return this.each(function() {

				// slider
        var slider = $(this);
        
        // defaults
        var o = options;
        
        // replace . with nothing, for use in addClass/removeClass
        var activeClass = o.active.replace('.','');
        
        // next button
        var nextButton = slider.find(o.nextButton);
        
        // previous button
        var prevButton = slider.find(o.prevButton);
        
        // find first slide
        var firstSlide = slider.find(o.slide).first();
        
        // find last slide
        var lastSlide = slider.find(o.slide).last();
        
				// add .active to first slide
				firstSlide.addClass(activeClass);
        
        // slide dots
        if( $(o.dots).length ) {
        
        	var sliderDots = slider.find(o.dots);
        	var slidesAmount = slider.find(o.slide).length;
          
          for(i = 0; i < slidesAmount; i++) {
            sliderDots.append('<span class="dot" data-num="'+i+'"></span>');
          }
          
          sliderDots.children().first().addClass(activeClass);
          
          $('.dot').click(function() {
          	var dotNum = $(this).data('num');
            sliderDots.children().removeClass(activeClass);
            $(this).addClass(activeClass);
            slider.find(o.slide).removeClass(activeClass);
            slider.find(o.slide).slice(dotNum,dotNum+1).addClass(activeClass);
          });
        }
        
        // check if jquery mobile exists
        if ( $.mobile ) {
        
          // swipe right
          $(o.slide).on(...