tiny-slider.js (カスタマイズ版) サンプル

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.6.0/tiny-slider.css">
<div class="slider">
  <div><img src="img/slide1.jpg" width="300" height="200"></div>
  <div><img src="img/slide2.jpg" width="300" height="200"></div>
  <div><img src="img/slide3.jpg" width="300" height="200"></div>
  <div><img src="img/slide4.jpg" width="300" height="200"></div>
</div>
<script src="tiny-slider.js"></script>

JavaScript

(function() {
  var slider = tns({
    container: '.slider',
    items: 1,
    slideBy: 'page',
    nav: true,
    controlsText: ['＜', '＞'],
    autoplay: true,
    autoplayHoverPause: true,
    autoplayButtonOutput: false,
    lazyload: true,
    nested: 'inner'
  });
})();

CSS

.tns-outer {
  width: 300px;
  margin: 0 auto;
}
.tns-inner {
  position: relative;
}
.tns-nav {
  text-align: center;
}
.tns-nav > [aria-controls] {
  width: 9px;
  height: 9px;
  margin: 0 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: #dddddd;
}
.tns-nav > [aria-selected="true"] {
  background: #999999;
}
[data-controls="prev"], [data-controls="next"] {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  padding: 0;
  border: none;
  border-radius: 50%;
  outline: none;
  opacity: 0.9;
  background: #cc0000;
  color: #ffffff;
  line-height: 30px;
  text-align: center;
}
[data-controls="prev"]:hover, [data-controls="next"]:hover {
  background: #aa0000;
}
[data-controls="prev"] {
  left: 10px;
}
[data-controls="next"] {
  right: 10px;
}

tiny-slider.js (カスタマイズ版) サンプル