<div class="wrapper">
  <div class="title">
    <h1>ROLLER BLADE.js</h1>
    <h2>Flipbook Style jQuery plugin</h2>
  </div>
  <div id="target" class="rollerblade">
<img src="http://hayachi.github.io/roll/roll-0.png" alt="Rollerblade.js"/>
</div>
  <div class="mouse">← Mouse drag →</div>
</div>
body{
  background: #E0ECF5;
  font-family: 'Comfortaa', cursive;
}

.title{
  display: block;
  text-align:center;
  padding:50px 0px 0px 0px;
  color: #3b4347;
  h1{
    letter-spacing: 2px;
    font-weight: 400;
    font-size:40px;
  }
  h2{
  letter-spacing: 2px;
  font-size:20px;
  }
}

.mouse{
  text-align:center;
  padding:20px 0px;
  font-size:20px;
}

.rollerblade{
  width: 100%;
  height: auto;
  display: block;
  img{
    width: 100%;
  }
}
$(document).ready(function(){
  $('#target').rollerblade({
    imageArray:[
      'http://hayachi.github.io/roll/roll-0.png',
      'http://hayachi.github.io/roll/roll-1.png',
      'http://hayachi.github.io/roll/roll-2.png',
      'http://hayachi.github.io/roll/roll-3.png',
      'http://hayachi.github.io/roll/roll-4.png',
      'http://hayachi.github.io/roll/roll-5.png',
      'http://hayachi.github.io/roll/roll-6.png',
      'http://hayachi.github.io/roll/roll-7.png',
      'http://hayachi.github.io/roll/roll-8.png',
      'http://hayachi.github.io/roll/roll-9.png',
      'http://hayachi.github.io/roll/roll-10.png',
      'http://hayachi.github.io/roll/roll-11.png',
      'http://hayachi.github.io/roll/roll-12.png',
      'http://hayachi.github.io/roll/roll-13.png',
      'http://hayachi.github.io/roll/roll-14.png',
      'http://hayachi.github.io/roll/roll-15.png',
      'http://hayachi.github.io/roll/roll-16.png',
      'http://hayachi.github.io/roll/roll-17.png',
      'http://hayachi.github.io/roll/roll-18.png',
      'http://hayachi.github.io/roll/roll-19.png',
      'http://hayachi.github.io/roll/roll-20.png',
      'http://hayachi.github.io/roll/roll-21.png',
      'http://hayachi.github.io/roll/roll-22.png',
      'http://hayachi.github.io/roll/roll-23.png',
      'http://hayachi.github.io/roll/roll-24.png'
    ]});
  });
View Compiled

External CSS

  1. https://cdn.rawgit.com/austenpayan/rollerblade/416da2f4/rollerblade.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdn.rawgit.com/austenpayan/rollerblade/416da2f4/rollerblade.js