Glider.jsは高速で軽量、モバイルフレンドリーなカルーセル。

glider.min.cssをインクルード

<link href="glider.min.css" rel="stylesheet" type="text/css">

Glider.jsをインクルード

<script src="glider.min.js"></script>

HTML例

<div>
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
  <div> 6 </div>
</div>

Glider.jsの初期化

new Glider(document.querySelector('.glider'));

オプション

new Glider(document.querySelector('.glider'), {
  slidesToShow: 'auto',
  slidesToScroll: 'auto',
  itemWidth: 150,
  duration: .5,
  dots: '.glider-dots',
  arrows: {
    prev: '.glider-prev',
    next: '.glider-next'
  },

  // allow mouse dragging
  draggable: false,
  // how much to scroll with each mouse delta
  dragVelocity: 3.3,

  // use any custom easing function
  // compatible with most easing plugins
  easing: function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
  },

  // event control
  scrollPropagate: false,
  eventPropagate: true,

  // Force centering slide after scroll event
  scrollLock: false,
  // how long to wait after scroll event before locking
  // if too low, it might interrupt normal scrolling
  scrollLockDelay: 150,

  // Glider.js breakpoints are mobile-first
  // be conscious of your ordering
  responsive: [
    {
      breakpoint: 900,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 575,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    }
  ]
});

MIT

• Tag
• Javascript
• Responsive
• Slider