さぁ!検索しよう!

自動再生やナビゲーション等、多機能なスライドショーを作る方法です。

DEMO

HTML

<div id="wrap">
  <div id="slides">
    <div id="inner">
      <img src="http://tsukulog.net/wp-content/uploads/2015/08/a0006_001899.jpg">
      <img src="http://tsukulog.net/wp-content/uploads/2015/06/GAK88_nekokafeneko-thumb-1000xauto-16206.jpg">
      <img src="http://tsukulog.net/wp-content/uploads/2015/06/HIRA86_MBAkey-thumb-1000xauto-17206.jpg">
      <img src="http://tsukulog.net/wp-content/uploads/2015/06/N825_benchinouenoshironeko-thumb-autox1000-14809.jpg">
      <img src="http://tsukulog.net/wp-content/uploads/2014/05/https-www.pakutaso.com-assets_c-2015-05-26NJ_eigonobisuketto-thumb-1000xauto-14009.jpg">
    </div>
  </div>
</div>

ポイント

仕組みは下記の通りです。

slideshow

CSS

#inner {
  position: absolute;
  top: 0;
  width: 100%;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
  position: absolute;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
}

.prev,
.next {
  background: #333;
  color: #fff;
  height: 8vw;
  line-height: 8vw;
  position: absolute;
  top: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-decoration: none;
  text-align: center;
  width: 8vw;
}

@media (min-width: 800px) {
  .prev,
  .next {
    height: 44px;
    line-height: 44px;
    width: 44px;
  }
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

#nav {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
}

#nav a {
  background: #ccc;
  border-radius: 100%;
  display: inline-block;
  height: 4vw;
  margin: 0 5px;
  width: 4vw;
}

@media (min-width: 800px) {
  #nav a {
    border-radius: 50%;
    height: 20px;
    width: 20px;
  }
}

#nav a.active {
  background: #333;
  cursor: default;
}

#wrap {
  position: relative;
  width: 100%;
}

#slides {
  height: 40vw;
  overflow: hidden;
  position: absolute;
  top: 0%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 60vw;
}

@media (min-width: 800px) {
  #slides {
    height: 300px;
    width: 500px;
  }
}

ポイント

#innerはjQueryで左右にスライドさせ、画像もjQueryで配置させるため、あえて水平方向は指定していません。

#inner {
  position: absolute;
  top: 0;
  width: 100%;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
  position: absolute;
}

jQuery

$(function() {
  $('#slides').append('<ul id="pager"><li><a href="#" class="prev"><</a></li><li><a href="#" class="next">></a></li></ul><div id="nav"></div>');
  var $pager = $('#pager'),
    $slidesWrap = $('#slides'),
    $nav = $('#nav'),
    $slides = $('#inner'),
    $slideImg = $slides.find('img'),
    current = 0,
    number = $slideImg.length;

  $slideImg.each(function(i) {
    $(this).css({
      left: '100' * i + '%'
    });
    $nav.append('<a href="#"></a>');
  });

  function navUpdate() {
    $nav.find('a').removeClass('active');
    $nav.find('a').eq(current).addClass('active');
  }

  function slider(index) {
    if (index < 0) {
      index = number - 1;
    }
    if (index > number - 1) {
      index = 0;
    }
    $slides.animate({
      left: '-100' * index + '%'
    });
    current = index;
    navUpdate();
  }

  $pager.find('a').click(function(event) {
    event.preventDefault();
    if ($(this).hasClass('prev')) {
      slider(current - 1);
    } else {
      slider(current + 1);
    }
  });

  $nav.find('a').click(function(event) {
    event.preventDefault();
    var navIndex = $(this).index();
    navUpdate();
    slider(navIndex);
  });

  var start;

  function timerStart() {
    start = setInterval(function() {
      slider(current + 1);
    }, 5000);
  }

  function timerStop() {
    clearInterval(start);
  }

  slider(current);

  timerStart();

  $slideImg.on({
    mouseover: timerStop,
    mouseout: timerStart
  });
});

ポイント

#slidesの前にページャーとナビゲーションを生成しています。

$('#slides').append('<ul id="pager"><li><a href="#" class="prev"><</a></li><li><a href="#" class="next">></a></li></ul><div id="nav"></div>');

各画像を左から0%→100%→200%…と、隣り合うように配置しています。

$slideImg.each(function(i) {
    $(this).css({
      left: '100' * i + '%'
    });
    $nav.append('<a href="#"></a>');
  });

navUpdate()は、画像の現在地を示すナビゲーションを更新する関数です。

function navUpdate() {
    $nav.find('a').removeClass('active');
    $nav.find('a').eq(current).addClass('active');
}

slider()は、引数に渡されたインデックスをもとに、$slidesを左右にスライドさせる関数です。また、インデックスがマイナスになれば最後のインデックスに戻し、最後のインデックスとなれば0に戻す処理や、インデックスとナビゲーションを更新する処理も加えています。

function slider(index) {
    if (index < 0) {
      index = number - 1;
    }
    if (index > number - 1) {
      index = 0;
    }
    $slides.animate({
      left: '-100' * index + '%'
    });
    current = index;
    navUpdate();
  }

ページャーの.prevをクリックすると、$slidesが左へ進み、.nextをクリックすると右へ進みます。

$pager.find('a').click(function(event) {
    event.preventDefault();
    if ($(this).hasClass('prev')) {
      slider(current - 1);
    } else {
      slider(current + 1);
    }
  });

クリックされたナビゲーションのインデックスと同じインデックスの画像が表示されます。

$nav.find('a').click(function(event) {
    event.preventDefault();
    var navIndex = $(this).index();
    navUpdate();
    slider(navIndex);
  });

5000ミリ秒毎に右へスライドされます。

 function timerStart() {
    start = setInterval(function() {
      slider(current + 1);
    }, 5000);
  }

カーソルを乗せている間はスライドが停止し、離すと再生されます。

 $slideImg.on({
    mouseover: timerStop,
    mouseout: timerStart
  });

参考文献

jQuery最高の教科書

以上で、プラグイン無しで多機能なスライドショーを作る方法を終わります。