Tiny Automatic Content Slider with JavaScript and CSS3 - Block Slider

Yet another responsive slider / carousel plugin that scrolls automatically, horizontally and infinitely through a set of html contents (e.g. images) with CSS3 transitions and transforms. Works on any responsive layout system that the number of slides will auto reduce / increase according to the screen width.

Basic usage:

1. Create a basic content slider with plain html markup.

<div id="block-slider">
  <div class="block-slider js-block-slider__wrap">
    <div class="block-slider__items js-block-slider__items">
      <div class="block-slider__item">
        <div class="block-slider__image">
          Image-1
        </div>
      </div>
      <div class="block-slider__item">
        <div class="block-slider__image">
          Image-2
        </div>
      </div>
      <div class="block-slider__item">
        <div class="block-slider__image">
          Image-3
        </div>
      </div>
      ...
    </div>
  </div>
</div>

2. The primary CSS rules for the content slider.

.block-slider { line-height: 100px; }

.block-slider__items { margin: -0.5em; }

.block-slider__items::after {
  display: table;
  clear: both;
  content: " ";
}

.block-slider__item {
  width: 50%;
  float: left;
  padding: 0 0.5em;
}
 @media (min-width: 500px) {

.block-slider__item { width: 33.33333%; }
}
 @media (min-width: 700px) {

.block-slider__item { width: 25%; }
}
 @media (min-width: 800px) {

.block-slider__item { width: 20%; }
}
 @media (min-width: 900px) {

.block-slider__item { width: 16.66667%; }
}
 @media (min-width: 1000px) {

.block-slider__item { width: 14.2857142857%; }
}

3. Load the block-slider.min.js at the bottom of the document.

<script src="dist/block-slider.min.js"></script> 

4. Initialize the slider.

BlockSlider(document.getElementById('block-slider'), {
  // options here
});

5. You can also use it as a plugin in your jQuery project.

$('#block-slider').BlockSlider({
  // options here
});

6. Available options with default values.

// animation interval
sInterval = 2000,

// transition spped
sTransition = 400,

// CSS selector
wrapClass = '.js-block-slider__wrap',
itemsClass = '.js-block-slider__items'

---

This awesome jQuery plugin is developed by rbrtsmith. For more Advanced Usages, please check the demo page or visit the official website.