A Pen by abidibo.

index.html

<section id="container">
</section>
<script>
  window.onload = function() {
    var slides = [
      {
        'img': '600/400',
        'caption': "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultricies consectetur mauris, et mattis quam consectetur sit amet. Etiam nec augue lorem. Integer quis tincidunt tortor, facilisis euismod odio"
      },
      {
      'img': '599/400',
        'caption': "Donec gravida, magna at euismod dapibus, purus elit faucibus arcu, et sagittis nulla urna sed lacus. Quisque quis nisl at ligula ullamcorper eleifend ac nec urna. Nulla adipiscing eros ante, a ornare urna scelerisque ac"
      },
      {
      'img': '601/400',
        'caption': "Fusce nec leo et libero pharetra gravida. Fusce mollis tempor ultricies. Etiam hendrerit ac mauris id pharetra. Curabitur volutpat dui nisi, nec fringilla ipsum volutpat vel"
      }
    ];
  
    var slider = new Slideshow().init('container', slides, 600, 400, 'http://lorempixel.com/');
  }
</script>

Responsive-slideshow.markdown

Responsive slideshow

CSS3, mootools powered responsive slideshow

A Pen by abidibo on CodePen.

License.

script.js

var Slideshow = function() {
  this.init = function(container, slides, slide_width, slide_height, media_root) {
    this._container = document.id(container)
      .addClass('slideshow');
    this._slides = slides;
    this._current = 0;
    this._media_root = media_root;
    this._or_slide_width = slide_width;
    this._or_slide_height = slide_height;
    this.bootstrap();
    var self = this;
    window.addEvent('resize', function() {
      if(self._resize_to) {
        clearTimeout(self._resize_to);
      }
      self._resize_to = setTimeout(function() {
        self._container.empty();
        self.bootstrap();
      }, 500);
    });
  };
  
  this.bootstrap = function() {
    this.render();
    this.events();
  };
  
  this.render = function() {
    this._container.setStyles({
      'width': this._or_slide_width + 'px',
      'max-width': '100%'
    });
    this.responsive();
    this.renderSpot();
    this.renderRail();
    this.renderNavbar();
    this.renderSlides();
  };
  
  this.responsive = function() {
    var real_width = this._container.getCoordinates().width - this._container.getStyle('padding-left').toInt() - this._container.getStyle('padding-right').toInt() - this._container.getStyle('border-left-width').toInt() - this._container.getStyle('border-right-width').toInt();
    var real_height = real_width / this._or_slide_width * this._or_slide_height;
    this._slide_width = real_width;
    this._slide_height = real_height;
    this._container.setStyles({
      'width': this._slider_width + 'px'
    });
  }
  
  this.renderSpot = function() {
    this._spot = new Element('div.slideshow-spot')
      .setStyles({
        width: '100%',
        height: this._slide_height + 'px'
      })
      .inject(this._container);
  }
  
  this.renderRail = function() {
    this._rail = new Element('div.slideshow-rail')
      .setStyles({
        width: (this._slide_width * this._slides.length) + 'px',
        height: this._slide_height + 'px'
      })
      .inject(this._spot);
  }
  
  this.renderNavbar = function() {
    this._navbar = new Element('div.slideshow-navbar')
      .adopt(
        this._nav_prev = new Element('span.fa.fa-2x.fa-arrow-circle-left.slideshow-prev.inactive'),
        this._dot_nav = new Element('span.slideshow-dotnav'),
        this._nav_index = new Element('span.fa.fa-2x.fa-bars.slideshow-index'),
        this._nav_next = new Element('span.fa.fa-2x.fa-arrow-circle-right.slideshow-next')
      )
      .inject(this._container);
    
      this._navbar_pane = new Element('div.slideshow-navbar-pane')
      .setStyles({
        'width': this._spot.getCoordinates().width + 'px',
        bottom: (this._container.getCoordinates().height - this._spot.getCoordinates(this._container).bottom) + 'px'
      })
      .inject(this._container);
  };
  
  this.renderSlides = function() {
    var self = this;
    this._slides.each(function(slide, index) {
      var dot = new Element('span.slideshow-dotnav-dot' + (index == 0 ? '.active' : ''))
        .setProperty('data-index', index)
        .inject(self._dot_nav);
      var pane_el = new Element('img.slideshow-thumb' + (index == 0 ? '.active' : '') + '[src=' + self._media_root + slide.img + ']')
        .setProperty('data-index', index)
        .inject(self._navbar_pane);
      
      if(index == self._slides.length - 1) {
        pane_el.onload = function() {  
          self._navbar_pane.store('height', self._navbar_pane.getCoordinates().height)
      .setStyle('height', 0);
        };
      }
        
      var article = new Element('article.slideshow-slide')
        .setStyles({
          width: self._slide_width + 'px',
          height: self._slide_height + 'px',
          'background-image': 'url(' + self._media_root + slide.img + ')',
          'background-repeat': 'no-repeat',
          'background-position': 'center center',
          'background-size': 'cover'
        })
        .adopt(new Element('div.slideshow-caption')
          .set('html', slide.caption)      
        )
        .inject(self._rail);
    });
  } 
  
  this.events = function() {
    var self = this;
    this._nav_next.addEvent('click', this.shift.bind(this, 'next'));
    this._nav_prev.addEvent('click', this.shift.bind(this, 'prev'));
    this._nav_index.addEvent('click', this.toggleNavPane.bind(this));
    this._dot_nav.getElements('.slideshow-dotnav-dot').addEvent('click', function() {
      self.jump(this.get('data-index'));
    });
    this._navbar_pane.getElements('img').addEvent('click', function() {
      self.jump(this.get('data-index'));
    })
  };
  
  this.shift = function(dir) {
    this._rail.setStyle(
      'left', 
      (-this._slide_width * (dir == 'next' ? ++this._current : --this._current)) + 'px'
    );
    this.updateNav();
  }
  
  this.jump = function(index) {
    this._current = index;
    this._rail.setStyle(
      'left', 
      (-this._slide_width * this._current) + 'px'
    );
    this.updateNav();
  }
  
  this.toggleNavPane = function() {
    if(this._navbar_pane.hasClass('active')) {
      this._navbar_pane.removeClass('active');
      this._navbar_pane.setStyle('height', '0');
      this._nav_index.removeClass('active');
    }
    else {
      this._navbar_pane.addClass('active');
      this._navbar_pane.setStyle('height', this._navbar_pane.retrieve('height'));
      
      this._nav_index.addClass('active');
    }
  }
  
  this.updateNav = function() {
    this._nav_prev[this._current == 0 ? 'addClass' : 'removeClass']('inactive');
    this._nav_next[this._current == this._slides.length -1 ? 'addClass' : 'removeClass']('inactive');
    this._dot_nav.getElements('.slideshow-dotnav-dot').removeClass('active');
    this._dot_nav.getElements('.slideshow-dotnav-dot')[this._current].addClass('active');
    this._navbar_pane.getElements('.slideshow-thumb').removeClass('active');
    this._navbar_pane.getElements('.slideshow-thumb')[this._current].addClass('active');
  }
};

style.css

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.slideshow {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  position: relative;
  padding: 5px;
  /*border-radius: 0 0 15px 15px;*/
  background-color: #000;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)); /* Chrome, Safari 4+ */
  background-image: -webkit-linear-gradient(top, #000, #333); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
  background-image:    -moz-linear-gradient(top, #000, #333); /* Firefox 3.6-15 */
  background-image:      -o-linear-gradient(top, #000, #333); /* Opera 11.10-12.00 */
  background-image:         linear-gradient(to bottom, #000, #333);
}
.slideshow-spot {
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
.slideshow-rail {
  position: absolute;
  left: 0px;
  transition: all 0.5s ease;
}
.slideshow-navbar-pane {
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  text-align: center;
  transform-origin: left bottom;
  transition: all 0.5s ease;
  opacity: 0;
  padding: 5px 0 0;
  overflow: hidden;
}
.slideshow-navbar-pane.active {
  opacity: 1;
}
.slideshow-thumb {
  height: 60px;
  margin-right: 5px;
  opacity: 0.6;
  cursor: pointer;
}
.slideshow-thumb:hover, .slideshow-thumb.active {
  opacity: 1;
}
.slideshow-navbar {
  border-radius: 0 0 15px 15px;
  position: relative;
  margin-top: 5px;
  border-top: 1px solid #444;
  background-color: #000;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)); /* Chrome, Safari 4+ */
  background-image: -webkit-linear-gradient(top, #333, #000); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
  background-image:    -moz-linear-gradient(top, #333, #000); /* Firefox 3.6-15 */
  background-image:      -o-linear-gradient(top, #333, #000); /* Opera 11.10-12.00 */
  background-image:         linear-gradient(to bottom, #333, #000);
  height: 40px;
}
.slideshow-dotnav {
  text-align: center;
  padding: 8px 40px;
  display: block;
}
.slideshow-dotnav-dot {
  width: 10px;
  height: 10px;
  background: #aaa;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
  cursor: pointer;
}
.slideshow-dotnav-dot.active {
  background: #ff9900;
}
.slideshow-prev, .slideshow-next, .slideshow-index {
  color: #aaa;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.slideshow-prev:hover, .slideshow-next:hover, .slideshow-index:hover, .slideshow-index.active {
  color: #ff9900;
}
.fa.inactive {
  visibility: hidden;
}
.slideshow-index {
  right: 40px;
}
.slideshow-next {
  right: 5px;
}
.slideshow-prev {
  left: 5px;
}
.slideshow-slide {
  position: relative;
  float: left;
}
.slideshow-caption {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  position: absolute;
  bottom: 0;
  border-top: 1px solid #eee;
  width: 100%;
  padding: 10px;
}