jQueryのスライドショーやカルーセルを探してるならこれ使っときんさい!

Web制作 jQuery

及川です、忙しさを理由に更新できずにいたので久しぶりとなってしまいました。

お客さんからいただく要望は色々あるんですが、それ以上にスライドショーやカルーセルを実現するjQueryプラグインなんかもありすぎて、50個も100個もまとめているページを良く見かけます。

「いらない、そんなに。」

毎日、毎日思ってます。

そこで、Web制作の現場で毎日のようによく使うスライドショーやカルーセルについて、よくご依頼いただくご要望に合わせて自分がよく使うものをまとめてみました。

Web制作現場でよくつかうjQueryスライドショーのサンプルコード

「実物とは違うアイコンをサムネイルとして使いたい、あのなんか○のやつじゃなくて」
「矢印クリックすると次に行ったり前に行ったり、最後に右の矢印クリックしたら先頭に戻してよ、できるよね」
「アイコンサムネイルクリックするとひもづいた画像に表示切り替えて、もちろん横移動で」
「垂直にスライドさせたいんだよ、ここ、横じゃなくて」
「画像だけじゃなくて、キャプションとか商品タイトルのとこも一緒にスライドさせたいなー。あ、購入ボタンも!」
「スマホで見たときは指でさっと切り替えたいよね、こう人差し指でサッとさ」
「ていうか、ここもっとかっちょよく切り替わんないの?ただ横に流れるだけじゃなくてなんかもっとこうかっちょよく」
「あ、ここ商品がず~っと動き続けてて欲しいんだ、ゆっくりと」

こんなご要望を実現します!

PCメインでメインビジュアルのクオリティ押しならnivoSlider

多様なエフェクトがあって画像表示を切り替えるときの効果が写真の美しさを31%増し(オレオレ比)にしてくれます!

Nivo Slider

デモはこちら

NivoSlider.png

シンプルなスライドショーで、レスポンシブWebデザインやスマホサイトでスワイプできるbxSliderやFlexSlider

使い方もシンプルでPCブラウザやスマホでも動作します。レスポンシブWebデザインのサイト制作ではよく使います。

bxSlider

デモはこちら

bxSlider.png

FlexSlider 2

デモはこちら

FlexSlider2.png

【ここに注意!注意!
同じページでいくつも使えるたり、サムネイル画像を個別に設定したり使い勝手がいいです。FlexSliderはbxSliderの前に使ってましたが同じページで複数使おうとすると動かなくなったり、既に動いているサイトからコピーして動かそうとしてもサムネイルと連携した動作などでハマることがありました。

画像だけでなくhtmlブロックをスライドすることもできるbxSliderが今後活躍しそうです!

縦にスクロールしたい?それはもうスライドショーでじゃないんじゃ...なんてときはjContentやjCarousel

たまにあります。縦スクロール。たとえば、PCでは横スクロールだけど、スマホは幅が狭いので縦にしないと同じように表示できない場合は縦にスライドさせるといった使い方ができます。

これを実現させるのがjQueryを使ったjContentやjCarouselです。jCarouselは4年くらい前にも使った覚えがあり、サイトが2006年に更新されてるのでかなり古参のスライダーです。

jContent

デモ:http://do-web.com/jcontent/demo

jContent.png

jCarousel

デモ:http://sorgalla.com/jcarousel/

jCarousel.png

【ここに注意!注意!】
jCarouselはスマホに対応してないようなのでjContentがオススメ!

商品を縦に自動スクロールさせたい!?( ◎ o ◎ ) うーん、めっかんないから作る!

ということで、自作しました。表示領域がわかりやすいように、上下に枠をつけてみました。

  • Facebook、Twitter、Linkedin等と連携したメディアサイト/会員サイトを制作・開発致します。ソーシャルメディアとの連携により、ユーザー情報取得をスムーズ+活用しやすくなります。
  • PC・スマートフォンからの閲覧・操作に対応したWebサイトを制作・開発致します。主に「レスポンシブWebデザイン」を利用したサイト制作をご提案しています。
  • 世界で最も利用されているCMSソフトウェアの1つであるMovable Typeを用いたCMSサイトを制作・開発致します。MTプラグイン開発にも対応。
  • ソーシャルグラフの活用により「確かな人材を探す企業と、確かなステップアップをしたい人を出会いやすくする」。リファーラルリクルーティングと呼ばれる紹介採用サービスを提供しています。
  • 広がり続けるソーシャルメディアを活用した「ソーシャル採用」「ソーシャルリクルーティング」を行うWebサイトを企画・制作・開発致します。
  • 弊社に関する基本情報をご覧いただけます。
  • 弊社へのアクセス方法、最寄り駅、地図をご確認いただけます。
  • 弊社のプライバシーポリシー(個人情報保護方針)をご確認いただけます。
  • 弊社の代表より株式会社SREにご興味をお持ちいただいた皆さまに、お伝えするメッセージをご覧いただけます。
  • ご提供しているサービス、採用、その他のお問い合わせをご希望の方はこちらからご連絡ください。

HTML

<div class="pickup">
  <div id="pickup-slide-wrapper">
    <div id="pickup-slide-inner">
    <ul id="pickup-slide">
      <li><a href="http://www.cherry-pick.jp/socialrecruit/" target="_blank"><img src="/blog/images/icon_social@2x.png" alt="Facebook、Twitter、Linkedin等と連携したメディアサイト/会員サイトを制作・開発致します。ソーシャルメディアとの連携により、ユーザー情報取得をスムーズ+活用しやすくなります。" title="ソーシャルメディア連携サイト"></a></li>
      <li><a href="http://www.cherry-pick.jp/development/multidevice/" target="_blank"><img src="/blog/images/icon_multidevice@2x.png" alt="PC・スマートフォンからの閲覧・操作に対応したWebサイトを制作・開発致します。主に「レスポンシブWebデザイン」を利用したサイト制作をご提案しています。" title="マルチデバイス対応サイト制作・開発"></a></li>
      <li><a href="http://www.cherry-pick.jp/development/cms/" target="_blank"><img src="/blog/images/icon_cms@2x.png" alt="世界で最も利用されているCMSソフトウェアの1つであるMovable Typeを用いたCMSサイトを制作・開発致します。MTプラグイン開発にも対応。" title="CMS(Movable Type)サイト構築"></a></li>
      <li><a href="http://www.cherry-pick.jp/socialrecruit/grrefer.php" target="_blank"><img src="/blog/images/icon_grrefer@2x.png" alt="ソーシャルグラフの活用により「確かな人材を探す企業と、確かなステップアップをしたい人を出会いやすくする」。リファーラルリクルーティングと呼ばれる紹介採用サービスを提供しています。" title="マルチデバイス対応サイト制作・開発"></a></li>
      <li><a href="http://www.cherry-pick.jp/socialrecruit/development.php" target="_blank"><img src="/blog/images/icon_development@2x.png" alt="広がり続けるソーシャルメディアを活用した「ソーシャル採用」「ソーシャルリクルーティング」を行うWebサイトを企画・制作・開発致します。" title="ソーシャル採用サイト企画・開発"></a></li>
      <li><a href="http://www.cherry-pick.jp/company/about.php" target="_blank"><img src="/blog/images/icon_about@2x.png" alt="弊社に関する基本情報をご覧いただけます。" title="会社概要"></a></li>
      <li><a href="http://www.cherry-pick.jp/company/access.php" target="_blank"><img src="/blog/images/icon_access@2x.png" alt="弊社へのアクセス方法、最寄り駅、地図をご確認いただけます。" title="アクセス"></a></li>
      <li><a href="http://www.cherry-pick.jp/company/policy.php" target="_blank"><img src="/blog/images/icon_policy@2x.png" alt="弊社のプライバシーポリシー(個人情報保護方針)をご確認いただけます。" title="プライバシーポリシー"></a></li>
      <li><a href="http://www.cherry-pick.jp/company/message.php" target="_blank"><img src="/blog/images/icon_message@2x.png" alt="弊社の代表より株式会社SREにご興味をお持ちいただいた皆さまに、お伝えするメッセージをご覧いただけます。" title="代表メッセージ"></a></li>
      <li><a href="https://www.cherry-pick.jp/contact/form.cgi" target="_blank"><img src="/blog/images/icon_contact@2x.png" alt="ご提供しているサービス、採用、その他のお問い合わせをご希望の方はこちらからご連絡ください。" title="お問い合せ"></a></li>
    </ul>
    </div>
  </div>
</div>

CSS

.pickup {
  width: 200px;
  padding: 0 11px;
}
#pickup-slide-wrapper {
  width: 200px;
  height: 320px;
  padding: 0;
  border: 5px solid #555;
  border-width: 5px 0;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  }
#pickup-slide-inner {
  height: 320px;
  position: relative;
  overflow: hidden;
  }
#pickup-slide-wrapper ul {
  overflow: hidden;
  }
#pickup-slide li {
  width: auto;
  height: 120px;
  padding: 5px 0;
  vertical-align: middle;
  }
ul li {
  list-style-type: none;
  list-style-position: outside;
  }
.pickup li {
  padding: 6px 0 0 0;
  margin: 0 0 auto 6px;
  text-align: center;
  }
.pickup li img {
  vertical-align: middle;
}

JavaScript

$(document).ready(function() {
  $('#pickup-slide-inner').each(function(){
    var loopsliderWidth = $(this).width();
    var loopsliderHeight = $(this).height();
    $(this).children('ul').wrapAll('<div id="loopslider_wrap"></div>');

    var child = $('#loopslider_wrap').children('ul').children('li');
    var listHeight = parseInt($(child).height());
    if ( !isNaN(parseInt($(child).css('margin-top'))) ) {
      listHeight += parseInt($(child).css('margin-top'));
    }
    if( !isNaN(parseInt($(child).css('margin-bottom'))) ) {
      listHeight += parseInt($(child).css('margin-bottom'));
    }
    
    if( !isNaN(parseInt($(child).css('padding-top'))) ) {
      listHeight += parseInt($(child).css('padding-top'));
    }
    if( !isNaN(parseInt($(child).css('padding-bottom'))) ) {
      listHeight += parseInt($(child).css('padding-bottom'));
    }
    var listCount = $('#loopslider_wrap').children('ul').children('li').length;

    var loopHeight = (listHeight)*(listCount);
    $('#loopslider_wrap').css({
      top: '0',
      left: '0',
      width: (loopsliderWidth),
      height: ((loopHeight) * 2),
      overflow: 'hidden',
      position: 'absolute'
    });

    $('#loopslider_wrap ul').css({
      height: (loopHeight)
    });
    loopsliderPosition();

    function loopsliderPosition(){
      $('#loopslider_wrap').css({top:'0'});
      $('#loopslider_wrap').stop().animate({top:'-' + (loopHeight) + 'px'},80000,'linear');
      setTimeout(function(){
        loopsliderPosition();
      },80000);
    };

    $('#loopslider_wrap ul').clone().appendTo('#loopslider_wrap');
  });
  
});

jQueryプラグインの開発者リスペクトパワーオブラブ!

PR

株式会社SREでは、レスポンシブWebデザインでのサイト制作、既存サイトのレスポンシブ化、jQueryによる開発も承っております。

商品・サービスへのお問い合わせ

ご相談、お見積もりのご依頼など

お問い合せはこちら