jQuery スライドショー

jQuery

<div class="wrapper-slide">
 <div class="slide">
  <ul class="container">
   <li class="current"><img src="(画像1)" width=~ height=~ /></li>
   <li><img src="(画像2)" width=~ height=~ /></li>
   <li><img src="(画像3)" width=~ height=~ /></li>
  </ul>
  <a href="#" class="prev">前の画像</a>
  <a href="#" class="next">次の画像</a>
 </div>
</div>

<style>
/* スライドショー全体のスタイル */
.slide {
 position: relative;
 margin: 0 auto;
 max-width: 198px;
 font-size: 0; /* 画像下の隙間を埋めるため */
}
.slide img {
 max-width: 100%;
}
.slide > .container {
 position: relative;
 overflow: hidden;
 margin: 0;
 padding: 0;
 list-style: none;
}
/* 写真の配置 */
.slide > .container > li {
 position: absolute;
 z-index: 0;
 top: 0;
 left: 0;
 opacity: 0;
 transition: opacity 1s linear;
}
.slide > .container > li.current {
 position: relative;
 z-index: 1;
 opacity: 1;
}
/* スライドショーのボタン */
.slide a.prev,
.slide a.next {
 position: absolute;
 display: block;
 top: 45%;
 width: 40px;
 height: 40px;
 text-indent: -5000px;
 z-index: 10; /* ボタンを常に画像より上に配置 */
}
.slide a.prev {
 background: url(矢印画像左1) 50% 50% no-repeat;
 left: 0;
}
.slide a.prev:hover {
 background: url(矢印画像左2) 50% 50% no-repeat;
}
.slide a.prev:active {
 background: url(矢印画像左3) 50% 50% no-repeat;
}
.slide a.next {
 background: url(矢印画像右1) 50% 50% no-repeat;
 right: 0;
}
.slide a.next:hover {
 background: url(矢印画像右2) 50% 50% no-repeat;
}
.slide a.next:active {
 background: url(矢印画像右3) 50% 50% no-repeat;
}
/**
* RESPONSIVE: スマートフォン向けウィンドウ幅600px以下
*/
@media screen and (max-width:600px) {
 .slide a.prev,
 .slide a.next {
  top: 40%;
 }
}
</style>
<script>
$(function(){
 var intervalId;
 setTimer();
 
 function setTimer(){
  intervalId = setInterval(autoClick, 10000);
 }
 function autoClick(){
   $(‘.slide’).children(‘a.next’).click();
 }
 
 function changeImage($click){
  //console.log($click);
  var $current;
  var findSelector = ”;
  var $new;
  
  $current = $click.siblings(‘.container’).children(‘.current’);
  
  if($click.hasClass(‘next’)){
   $new = $current.next();
   findSelector = ‘:first-child’;
  } else {
   $new = $current.prev();
   findSelector = ‘:last-child’;
  }
  
  if($new.length == 0) {
   $new = $current.siblings(findSelector);
  }
  $current.removeClass(‘current’);
  $new.addClass(‘current’);
  setTimer();
 }
 
 $(‘.slide’)
 .on(‘click’, ‘> a’, function(event){
  event.preventDefault();
  clearInterval(intervalId);
  changeImage($(this));
 });
});
</script>

jQueryプラグイン

プラグイン:bxSlider設定

http://bxslider.com/
からダウンロード、解凍してフォルダごと参照設定

jquery.bxslider
└jquery.bxslider.js
└jquery.bxslider.css
└images
└plugins
test.html

※test.html
<script src="http://code.jquery.com/jquery-1.10.1.min.js"
integrity="sha256-SDf34fFWX/ZnUozXXEH0AeB+Ip3hvRsjLwp6QNTEb3k="
 crossorigin="anonymous"></script>

※jQueryのバージョンによっては動かないらしい
<script src="./jquery.bxslider/jquery.bxslider.js"></script>
<link rel="stylesheet" href="./jquery.bxslider/jquery.bxslider.css">

標準


<ul class="bxslider">
 <li><img src="画像1" width=~ height=~ /></li>
 <li><img src="画像2" width=~ height=~ /></li>
 <li><img src="画像3" width=~ height=~ /></li>
</ul>
<script>
$(document).ready(function(){
 $('.bxslider').bxSlider();
});
</script>

オプション

<script type="text/javascript">
$(document).ready(function(){
 $('.bxslider').bxSlider({
  auto: true, 自動再生
  speed: 1000, スライド速度
  pause: 4000, スライド間の停止時間
  mode: 'horizontal', 横スライド
  mode: 'vertical', 縦スライド
  mode: 'fade', フェードイン
  pager: 'false', ●〇ボタン
  controls: 'false' ←→ボタン
 });
});
</script>

Bootstrap

Bootstrap カルーセル(スライドショー)」参照

コメントを残す

メールアドレスが公開されることはありません。