Unsliderで画像をかっこよくスライド表示する

jquery

おおむね、このサイト（大変参考になりました！）の記述でいいんですが、私の環境では若干の手直しが必要だったのでメモ。

bannerクラスのCSSの追加

本家のunslider.cssの中から、bannerクラス関連をコピペ＆改変。

  • .banner { ...
  • .banner ul { ...
  • .banner ul li { ...
  • .banner .dots { ...
  • .banner .dots li { ...
  • .banner .dots li.active { ...

display、position、overflow、float などの設定が大変重要です。dotsクラスの設定もあるのとないのとでは美観に雲泥の違いがあります。ありがたく使わせていただきました。

あとの設定はお好みで。スマートフォン対応も（@mediaほにゃらら）お好みで。

リストタグにpaddingやmarginが含まれていると、スライドがちょっとずつずれて表示される現象が起きます。上記のbannerクラスの設定内で消しておくとよいでしょう。

unslider.js のswipe対応

私の環境では、jquery.event.swipe.js を読み込むだけではswipeに反応しなかったので以下のように修正しました。

unslider.jsの"Swipe support"の部分（L.108付近）

  • 旧
if($.event.swipe) {
  • 新
if($.event.special.swipe) {

jquery.event.swipe.js のここの記述を参考にしています。

自動スライドショー停止、スライドのアニメーション停止

個人的にうっとうしかったので消しました。"speed"と"delay"の項目で制御します。

jQuery(function($){
  var slides = $('.banner');
  slides.unslider({
    speed: 0,                  // スライドのアニメーション停止
    delay: false,              // 自動スライドショー停止
        :
    }
  });
});

以上（to be continued）