A Pen by Andy.

index.html

<div class="content_wrapper">

<div class="slider_container horizontal"><div class="slider_border"><div class="slider_galery">
    <div class="element"><img src="http://dummyimage.com/430x190/f00"/></div>

  <div class="element"><img src="http://dummyimage.com/430x190/0f0"/></div>

  <div class="element"><img src="http://dummyimage.com/430x190/00f"/></div>

  <div class="element"><img src="http://dummyimage.com/430x190/f00"/></div>

  <div class="element"><img src="http://dummyimage.com/430x190/0f0"/></div>

  <div class="element"><img src="http://dummyimage.com/430x190/00f"/></div>

  <div class="element"><img src="http://dummyimage.com/430x190/f00"/></div>

  <div class="element"><img src="http://dummyimage.com/430x190/0f0"/></div>

  <div class="element"><img src="http://dummyimage.com/430x190/00f"/></div>

  <div class="element box"><h3>Überschrift</h3></div>
</div></div></div>
</div>

script.js

document.addEventListener('DOMContentLoaded', function() {
  DOMTokenList.prototype.addMany = function(classes) {
    if(typeof classes === 'string') {
      var classList = classes.split(' ');
      for(var i = classList.length - 1; i >= 0; i--) {
        this.add(classList[i]);
      }
    }
  };
  DOMTokenList.prototype.removeMany = function(classes) {
    if(typeof classes === 'string') {
      var classList = classes.split(' ');
      for(var i = classList.length - 1; i >= 0; i--) {
        this.remove(classList[i]);
      }
    }
  };
  DOMTokenList.prototype.toggleMany = function(classes) {
    if(typeof classes === 'string') {
      var classList = classes.split(' ');
      for(var i = classList.length - 1; i >= 0; i--) {
        this.toggle(classList[i]);
      }
    }
  };
  
  function animateSliders(opts) {
    opts = opts || {};
    opts.slider_container = opts.slider_container || 'slider_container';
    opts.slider_galery = opts.slider_galery || 'slider_galery';
    opts.div_width = opts.div_width || 270;
    opts.div_height = opts.div_height || 115;
    opts.activeClass = opts.activeClass || 'active';
    opts.disabledClass = opts.disabledClass || 'disabled';
    opts.navClass = opts.navClass || 'nav';
    opts.elementClass = opts.elementClass || 'element';
    
    var sliders = document.getElementsByClassName(opts.slider_container);
    var slider_galery = document.getElementsByClassName(opts.slider_galery);
    var leftRight = ['right', 'left'];
    for (var i = sliders.length - 1; i >= 0; i--) {
      var slider = sliders[i];
      for(var j = 1; j >= 0; j--) {  
        var navEl = document.createElement('div');
        navEl.classList.addMany('nav ' + leftRight[j]);
        navEl.addEventListener('click', (function(slider_galery, inc, activeClass, disabledClass, navClass, elementClass) {
          return function(event) {
            if(!event.target.classList.contains(disabledClass)) {
              var elements = slider_galery.getElementsByClassName(elementClass);
              console.log(slider_galery);
              console.log(elements);
              for(var i = elements.length - 1; i >= 0; i--) {
                if(elements[i].classList.contains(activeClass)) {
                  elements[i].classList.remove(activeClass);
                  elements[i+inc].classList.add(activeClass);
                  if(i+inc !== (elements.length - 1) || i+inc !== 0) {
                    var navs = event.target.parentNode.getElementsByClassName(navClass);
                    navs[0].classList.remove(disabledClass);
                    navs[1].classList.remove(disabledClass);
                    console.log('Ping');
                  }
                  console.log('i: ' + i);
                  console.log('elements.length: ' + elements.length);
                  if(i+inc === (elements.length - 1) || i+inc === 0) {
                    event.target.classList.add(disabledClass);
                    console.log('Pong');
                  }
                  break;
                }
              }
            }
          }
        })(slider_galery[i], Math.pow(-1, j), opts.activeClass, opts.disabledClass, opts.navClass, opts.elementClass), false);
        slider.appendChild(navEl).innerText = '^';
      }
      var elements = slider_galery[i].getElementsByTagName('div');
      elements[((elements.length/2)|0)].classList.add(opts.activeClass);
      sliders[i].style.width = opts.div_width + 'px';
      sliders[i].style.height = opts.div_height + 'px';
      slider_galery[i].style.width = elements.length + '00%';
      slider_galery[i].style.height = opts.div_height + 'px';
    }
  }
  var opts = {
    div_width: 430, 
    div_height: 190
  };
  animateSliders(opts);
}, false);

Slider-with-CSS3-+-Vanilla-JS.markdown

Slider with CSS3 + Vanilla JS

A Pen by Andy on CodePen.

License.

style.css

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  min-height: 100%;
  height: 100%;
}

.content_wrapper {
  background-color: hsla(80, 50%, 50%, 1);
  min-height: 100%;
  min-width: 100%;
  height: 100%;
  width: 100%;
}

.slider_container {
  box-sizing: content-box;
  position: relative;
  margin: 20px 15px;
  border: 1px solid hsla(0, 0%, 65%, 1);
}

.slider_border {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.slider_galery .box {
  width: 100%;
  height: 100%;
  background-color: #aaa;
}

.slider_galery .element {
  -webkit-transition: -webkit-transform 1s ease-out;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-100%, 0%);
}

.vertical .slider_galery .element {
  -webkit-transform: translate(0%, -100%);
}

.slider_galery .element.active {
  -webkit-transform: translate(0%, 0%);
}

.slider_galery .element.active ~ .element {
  -webkit-transform: translate(100%, 0%);
}

.vertical .slider_galery .element.active ~ .element {
  -webkit-transform: translate(0%, 100%);
}

.nav {
  padding-top: 2px;
  box-sizing: border-box;
  height: 20px;
  width: 40px;
  background-color: hsla(0, 0%, 75%, 1);
  border: 1px solid hsla(0, 0%, 65%, 1);
  border-top-right-radius: 25%;
  border-top-left-radius: 25%;
  position: absolute;
  
  text-align: center;
  font-family: Verdana, sans-serif;
  font-weight: 600;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.horizontal .nav {  
  top: 50%;
  margin-top: -10px;
}

.vertical .nav {  
  left: 50%;
  margin-top: -10px;
  margin-bottom: -10px;
}

.nav:hover {
  background-color: hsla(0, 0%, 50%,1);
}

.nav.disabled {
  color:  hsla(0, 0%, 95%, 1);
  background-color: hsla(0, 0%, 80%, 1);
  cursor: default;
}

.horizontal .nav.left {
  -webkit-transform: rotate(-90deg);
  left: 0px;
  margin-left: -20px;
}

.horizontal .nav.right {
  -webkit-transform: rotate(90deg);
  right: 0px;
  margin-right: -20px;
}

.vertical .nav.left {
  -webkit-transform: rotate(0deg);
  top: 0;
  margin-left: -20px;
}

.vertical .nav.right {
  -webkit-transform: rotate(180deg);
  bottom: 0;
  margin-left: -20px;
}