jQuery Liteslider プラグイン

jQuery のレスポンシブ対応のコンテンツスライダープラグインです。

特徴

レスポンシブ対応
コンテンツ対応
スライドショー
アニメーション効果はスライド、フェード、スライドフェード（スライドしながらフェード）の３種類
タッチデバイスのスワイプ対応

使い方

スクリプトと CSS を読み込む

jQuery と liteslider.js、liteslider.css を読み込むように HTML に記述します。

<link rel="stylesheet" href="liteslider.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="liteslider.js"></script>

スライドする画像（コンテンツ）を配置する

配置する場所に下記のように記述します。

liteslider、slides-container および slides クラスは必須です。slide-content クラスはコンテンツを表示する場合のみ記述します。

<div id="liteslider-1" class="liteslider">
	<div class="slides-container">
		<ul class="slides">
			<li><img src="01.jpg" /></li>
			<li><img src="02.jpg" /><div class="slide-content">ここにコンテンツを記述する。</div></li>
			<li><img src="03.jpg" /></li>
		</ul>
	</div>
</div>

スライドを実行するスクリプト

スライドを実行するスクリプトを下記のように記述します。

<script type="text/javascript">
jQuery(function($) {
  $("#liteslider-1").liteslider({
    effect: "slide",
    navigation: true,
    pagination: true,
    slideshow: true,
    slideshowSpeed: 5000,
    animationSpeed: 1000
  });
});
</script>

オプション

プロパティ	デフォルト	説明
effect	“slide”	アニメーション効果。 “slide”，”fade”，”slidefade” の何れか。
navigation	true	ナビゲーションを表示するかどうか。
pagination	true	ページネーションを表示するかどうか。
slideshow	true	自動でスライドショーするかかどうか。
slideshowSpeed	5000	スライドショーでスライドする間隔。ミリ秒単位で指定します。
animationSpeed	1000	アニメーション効果のスピード。ミリ秒単位で指定します。
navigationPrev	“<”	戻るナビゲーションのテキスト。
navigationNext	“>”	次へナビゲーションのテキスト。
start	function(){}	スライドの初期化が完了したときに発生するコールバック関数を指定します。
before	function(){}	スライドが開始するときに発生するコールバック関数を指定します。
after	function(){}	スライドが終了したときに発生するコールバック関数を指定します。

スライダー本体

liteslider.js

/**
 * jQuery Liteslider v1.3.0
 * Copyright 2015 ishitaka
 */
;
jQuery(function($) {
  $.fn.liteslider = function(options) {
    var defaultOptions = {
      effect: 'slide',
      navigation: true,
      pagination: true,
      slideshow: true,
      slideshowSpeed: 5000,
      animationSpeed: 1000,
      navigationPrev: '&lt;',
      navigationNext: '&gt;',
      start: function(){},
      before: function(){},
      after: function(){}
    };
    var target = $(this);
    var options = $.extend({}, defaultOptions, options);
    var container = target.find('.slides-container');
    var slideCount = target.find('.slides > li').length;
    var slides = target.find('.slides');
    var pagination;
    var slideNo = 1;
    var slideWidth = 0;
    var slidePos = 0;
    var isSlideAction = false;
    var touchStartX;
    var touchMoveX = 0;

    function init() {
      if (options.effect === 'slide') {
        /* 最後のスライドから最初のスライドへアニメーションさせるため、最後に最初のスライドを追加 */
        slides.append(slides.find('> li:first-child').clone(true));
      } else {
        slides.find('> li:not(:first-child)').css({position:"absolute", left:"0", top:"0", opacity:"0"});
      }

      if (options.navigation) {
        target.append('<div class="slide-nav-prev">'+options.navigationPrev+'</div><div class="slide-nav-next">'+options.navigationNext+'</div>');
        $(".slide-nav-prev").click(function() {
          isSlideAction = true;
          if (options.effect === 'slide') {
            slidePrev();
          } else if (options.effect === 'fade') {
            fade(slideNo === 1 ? slideCount : slideNo - 1);
          } else {
            slideFade(slideNo === 1 ? slideCount : slideNo - 1);
          }
        });
        $(".slide-nav-next").click(function() {
          isSlideAction = true;
          if (options.effect === 'slide') {
            slideNext();
          } else if (options.effect === 'fade') {
            fade(slideNo >= slideCount ? 1 : slideNo + 1);
          } else {
            slideFade(slideNo >= slideCount ? 1 : slideNo + 1);
          }
        });
      }

      if (options.pagination) {
        var paginationHtml = '<ol class="slide-pagination">';
        for (var i = 0; i < slideCount; i++) {
          paginationHtml += '<li></li>';
        }
        paginationHtml += '</ol>';
        target.append(paginationHtml);
        pagination = target.find('.slide-pagination li');
        pagination.click(function() {
          isSlideAction = true;
          var index = pagination.index(this);
          if (options.effect === 'slide') {
            slide(index + 1);
          } else if (options.effect === 'fade') {
            fade(index + 1);
          } else {
            slideFade(index + 1);
          }
        });
        pagination.eq(slideNo - 1).addClass('slide-active');
      }

      slides.bind('touchstart', function () {
        touchStartX = event.changedTouches[0].pageX;
      });
      slides.bind('touchmove', function (e) {
        touchEndX = event.changedTouches[0].pageX;
        touchMoveX = Math.round(touchStartX - touchEndX);
      });
      slides.bind('touchend', function (e) {
        if (touchMoveX > 50) {
          isSlideAction = true;
          if (options.effect === 'slide') {
            slideNext();
          } else if (options.effect === 'fade') {
            fade(slideNo >= slideCount ? 1 : slideNo + 1);
          } else {
            slideFade(slideNo >= slideCount ? 1 : slideNo + 1);
          }
        } else if (touchMoveX < -50) {
          isSlideAction = true;
          if (options.effect === 'slide') {
            slidePrev();
          } else if (options.effect === 'fade') {
            fade(slideNo === 1 ? slideCount : slideNo - 1);
          } else {
            slideFade(slideNo === 1 ? slideCount : slideNo - 1);
          }
        };
      });

      resize();
      slides.find('> li').show();

      options.start();
    }

    function resize() {
      slideWidth = container.width();
      slides.find('li').css({"width": slideWidth + "px"});
      if (options.effect === 'slide') {
        slides.width((slideCount + 1) * slideWidth);
        slidePos = (slideNo - 1) * slideWidth;
        container.animate({scrollLeft: slidePos}, 1, "swing");
      } else {
        slides.width(slideWidth);
      }
    }

    function slideNext() {
      options.before();
      slidePos = ((slideNo - 1) * slideWidth);
      container.animate({scrollLeft: slidePos}, 1, "swing", function() {
        slideNo++;
        slidePos = ((slideNo - 1) * slideWidth);
        container.animate({scrollLeft: slidePos}, options.animationSpeed, "swing", function() {
          options.after();
        });
        if (slideNo > slideCount) {
          slideNo = 1;
        }
        if (options.pagination) {
          pagination.removeClass('slide-active');
          pagination.eq(slideNo - 1).addClass('slide-active');
        }
      });
    }

    function slidePrev() {
      options.before();
      if (slideNo === 1) {
        slideNo = slideCount + 1;
      }
      slidePos = ((slideNo - 1) * slideWidth);
      container.animate({scrollLeft: slidePos}, 1, "swing", function() {
        slideNo--;
        slidePos = ((slideNo - 1) * slideWidth);
        container.animate({scrollLeft: slidePos}, options.animationSpeed, "swing", function() {
          options.after();
        });
        if (options.pagination) {
          pagination.removeClass('slide-active');
          pagination.eq(slideNo - 1).addClass('slide-active');
        }
      });
    }

    function slide(no) {
      if (slideNo === no)
        return;
      options.before();
      slidePos = ((slideNo - 1) * slideWidth);
      container.animate({scrollLeft: slidePos}, 1, "swing", function() {
        slideNo = no;
        slidePos = ((slideNo - 1) * slideWidth);
        container.animate({scrollLeft: slidePos}, options.animationSpeed, "swing", function() {
          options.after();
        });
        if (options.pagination) {
          pagination.removeClass('slide-active');
          pagination.eq(slideNo - 1).addClass('slide-active');
        }
      });
    }

    function fade(no) {
      options.before();
      var slide = slides.find('> li');
      $(slide[slideNo - 1]).animate({opacity: '0'}, options.animationSpeed);
      $(slide[no - 1]).animate({opacity: '1'}, options.animationSpeed, function() {
        options.after();
      });
      slideNo = no;
      if (options.pagination) {
        pagination.removeClass('slide-active');
        pagination.eq(slideNo - 1).addClass('slide-active');
      }
    }

    function slideFade(no) {
      options.before();
      var slide = slides.find('> li');
      if (slideNo > no)
        $(slide[slideNo - 1]).animate({left: '64px', opacity: '0'}, options.animationSpeed);
      else
        $(slide[slideNo - 1]).animate({left: '-64px', opacity: '0'}, options.animationSpeed);
      $(slide[no - 1]).animate({left: '0', opacity: '0'}, 1);
      $(slide[no - 1]).animate({left: '0', opacity: '1'}, options.animationSpeed, function() {
        options.after();
      });
      slideNo = no;
      if (options.pagination) {
        pagination.removeClass('slide-active');
        pagination.eq(slideNo - 1).addClass('slide-active');
      }
    }

    if (options.slideshow) {
      setInterval(function() {
        if (!isSlideAction) {
          if (options.effect === 'slide') {
            slideNext();
          } else if (options.effect === 'fade') {
            fade(slideNo >= slideCount ? 1 : slideNo + 1);
          } else {
            slideFade(slideNo >= slideCount ? 1 : slideNo + 1);
          }
        } else {
          isSlideAction = false;
        }
      }, options.animationSpeed + options.slideshowSpeed);
    }

    $(window).resize(function() { resize(); });

    init();
  };
});

liteslider.css

.liteslider {
    width: 100%;
    height: auto;
    position: relative;
}
.liteslider img {
    max-width: 100%;
    height: auto;
}
.liteslider .slides-container {
    overflow: hidden;
}
.liteslider ul.slides {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    max-width: none;
}
.liteslider ul.slides > li {
    float: left;
    text-align: center;
    position: relative;
}
.liteslider ul.slides > li:not(:first-child) {
    display: none;
}
.liteslider ul.slides:after {
    content: "";
    display: block;
    clear: both;
}
.liteslider .slide-content {
    position: absolute;
    margin: 0;
    padding: 10px;
    top: 0;
    left: 0;
    width: 100%;
    text-align: left;
}

/*
Navigation
*/
.liteslider .slide-nav-prev,
.liteslider .slide-nav-next {
    position: absolute;
    color: #333333;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    margin-top: -15px;
    top: 50%;
    z-index: 11;
}
.liteslider .slide-nav-prev {
    left: 0;
}
.liteslider .slide-nav-next {
    right: 0;
}
.liteslider:hover .slide-nav-prev,
.liteslider:hover .slide-nav-next {
    opacity: 0.8;
}
.liteslider:hover .slide-nav-prev:hover,
.liteslider:hover .slide-nav-next:hover {
    opacity: 0.5;
}

.liteslider .slide-nav-prev > span,
.liteslider .slide-nav-next > span { font-size: 30px; width: 30px; height: 30px; }

/*
Pagination
*/
.liteslider ol.slide-pagination {
    position: absolute;
    margin: 0;
    padding: 0;
    list-style-type: none;
    bottom: 15px;
    width: 100%;
    height: 16px;
    text-align: center;
    z-index: 10;
}
.liteslider ol.slide-pagination li {
    margin: 0 5px;
    width: 14px;
    height: 14px;
    display: inline-block;
    cursor: pointer;
    background-color: #333333;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.3);
    opacity: 0.5;
}
.liteslider ol.slide-pagination li:hover,
.liteslider ol.slide-pagination li.slide-active {
    border: 2px solid rgba(255,255,255,0.4);
    opacity: 1.0;
}

変更履歴

v1.3.0

新しいアニメーション効果（slidefade）を追加しました。

v1.2.0

コールバック関数機能を追加しました。

v1.1.0

スワイプに対応しました。

v1.0.0

最初のリリース