sc.js

//Inspired by http://g-liu.com/blog/2013/08/tutorial-basic-carouselslideshow-with-javascript/

var SimpleCarousel = function(id, options){
  this.id = id || 'slides'; // default id -> #slides
  this.class = options.class || 'slide'; // default child class -> .slide
  this.w = options.width;
  this.h = options.height;
  this.duration = options.duration || 4000; // default 4s
  
  this.container = document.getElementById(this.id);
  this.carouselItems = document.getElementsByClassName(this.class);

  /**
  * Array to store carousel items
  * @name items
  * @type array
  */
  this.items = this.carouselItems;
  this._init();
}


SimpleCarousel.prototype._init = function(){
  var self = this;
  
  setInterval(function(){ 
    self.switch();
  }, 4000);
  
}

SimpleCarousel.prototype.switch = function(){
  var self = this;
  var items = self.items;
  
  console.log(items);
  var activeItem = getActiveItem(self.items);
  var nextItem = next(activeItem, self.items.length);
  
  self.items[activeItem].style.display = 'none';
  self.items[nextItem].style.display = 'table';
  
  function getActiveItem(){
    activeItem = -1;
    
    for (var i=0; i < self.items.length; i++){
      if(self.items[i].style.display == 'table') {
        activeItem = i;
      }
    }
    return activeItem;
  }
  
  function prev(num, length){
    if(num == 0) return length - 1;
    else return num - 1;
  }

  function next(num, length){
    if(num == length - 1) return 0;
    else return num + 1;
  }
}

Usage:

HTML

<div id="slides">
    <div class="slide" style="display: table;">
        <div>Lorem something something something something something something</div>
        <div><img src="http://loremflickr.com/59/59/paris,girl/all" /></p></div>
      </div>
    </div>
    <div class="slide">
      <div> Lorem something something something
      </div>
       <div>
         <img src="http://loremflickr.com/59/59/paris,girl/all">
      </div>
    </div>
    <div class="slide">
      <div> Lorem something something something
      </div>
     <div>
       <img src="http://loremflickr.com/59/59/paris,girl/all">
    </div>
  </div>
  <div class="slide">
   <div> Lorem something something something
      </div>
     <div>
       <img src="http://loremflickr.com/59/59/paris,girl/all">
    </div>
  </div>
</div>

CSS

@charset "UTF-8";
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

html, body {
  height: 100%;
}

html {
  display: table;
  margin: auto;
}

body {
  display: table-cell;
  vertical-align: middle;
  background-color: #f6f6f6;
}

#slides {
  margin: 0 auto;
  width: 100%;
  padding: 0 auto;
  text-align: center;
  border-spacing: 20px;
  border-collapse: separate;
}

.slide {
  display: none;
  text-align: center;
  width: 100%;
}
.slide div:first-child {
  dispay: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: #fff;
  border-radius: 50px;
  padding: 10px 10px 20px 15px;
  font-style: italic;
  font-size: 1em;
  color: #797979;
}
.slide div:first-child:before {
  font-size: 2em;
  line-height: 1em;
  position: absolute;
  font-family: serif;
  content: open-quote;
  color: #d4d4d4;
  width: 100%;
  overflow: hidden;
  margin: 5px auto 0;
  position: relative;
  quotes: "“" "”" "‘" "’";
}
.slide div:first-child:after {
  font-size: 2em;
  line-height: 1em;
  position: absolute;
  font-family: serif;
  content: close-quote;
  color: #d4d4d4;
  width: 100%;
  overflow: hidden;
  margin: 5px auto 0;
  position: relative;
  quotes: "“" "”" "‘" "’";
}
.slide div:last-child {
  dispay: table-cell;
  vertical-align: middle;
  text-align: left;
  padding-left: 20px;
  padding-top: 10px;
}
.slide div:last-child img {
  vertical-align: middle;
}
.slide img {
  vertical-align: middle;
  border-radius: 50%;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .slide div:last-child {
    text-align: center;
  }
}