Javascript
【Javascript】ページングコントロールを備え、高速、軽量、モバイルフレンドリーなカルーセルGlider.js
November 17, 2018

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