Skip to content

Instantly share code, notes, and snippets.

@dariye
Last active May 11, 2016 22:13
Show Gist options
  • Save dariye/eadf4e12dc386698f8a096f1858e7a9e to your computer and use it in GitHub Desktop.
Save dariye/eadf4e12dc386698f8a096f1858e7a9e to your computer and use it in GitHub Desktop.
//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;
}
}
@dariye
Copy link
Author

dariye commented May 11, 2016

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;
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment