Responsive & Touch Enabled Content Slider – elba.js

Preview:

Description:

elba.js is a responsive, touch enabled, full screen JavaScript content slider that has the ability to check the screen width and load in the correct image.

How to use it:

Load the required elba.css in the header of the document.

<link rel="stylesheet" href="path/to/elba.css">

Load the elba.js script at the end of the document to improve page load speed.

<script src="path/to/elba.js"></script>

Create the Html for a fullscreen content slider. Use data-src attributes to specify the image sources for different screen width. This works on screen width with 3 sizes;default(desktop), medium(tablet) and small(smart phone).

<figure id="carousel" class="elba-carousel">
  <figure class="elba" data-src="1.jpg" data-src-medium="[email protected]" data-src-large="[email protected]">
    <figcaption class="elba-content">
      <div class="elba-banner">
        <h1>Title 1</h1>
        <p>Content 1</p>
      </div>
    </figcaption>
  </figure>
  <figure class="elba" data-src="2.jpg" data-src-medium="[email protected]" data-src-large="[email protected]">
    <figcaption class="elba-content">
      <div class="elba-banner">
        <h1>Title 2</h1>
        <p>Content 2</p>
      </div>
    </figcaption>
  </figure>
  <figure class="elba" data-src="3.jpg" data-src-medium="[email protected]" data-src-large="[email protected]">
    <figcaption class="elba-content">
      <div class="elba-banner">
        <h1>Title 3</h1>
        <p>Content 3</p>
      </div>
    </figcaption>
  </figure>
</figure>

Initialize the slider and set the breakpoints for responsive images.

! function(){
  var gallery = new Elba( document.getElementById('carousel'), {
    slideshow: 8000,
    breakpoints: [{
      width: 768, 
      src: 'data-src-medium'
      }, {
      width: 1080, 
      src: 'data-src-large'
    }]
  });
}();

Changelog:

05/19/2015

• Bugfix