jQuery

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

March 9, 2018

SilverTrackはプラグインを使って拡張できるスライドカルーセルjQueryプラグインです。

Getting Started

<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

Demo/Download