jQuery
【jQuery】スマートで拡張可能なスライドカルーセルSilverTrack
March 9, 2018

SilverTrackはプラグインを使って拡張できるスライドカルーセルjQueryプラグインです。
<div class="track my-track"> <!-- SilverTrack requires only this part --> <div class="view-port"> <div class="slider-container"> <div class="item"><img src="http://lorempixel.com/230/134/nature/1/"></div> <div class="item"><img src="http://lorempixel.com/230/134/nature/2/"></div> <!-- ... --> </div> </div> <!-- My custom navigator links --> <div class="pagination"> <a href="#" class="prev disabled"></a> <a href="#" class="next disabled"></a> </div> </div>
.view-port { width: 960px; overflow: hidden; position: relative; } .slider-container { position: relative; height: 138px; margin: 0; padding: 0; } .item { position: absolute; width: 234px; height: 138px; margin-right: 8px }
var container = $(".my-track"); var track = container.find(".slider-container").silverTrack(); // install the plugins you want, in our case Navigator track.install(new SilverTrack.Plugins.Navigator({ prev: $("a.prev", container), next: $("a.next", container) })); track.start();
MIT