article section.body .theme-default div { margin-bottom: 0; } article section.body .bx-wrapper ul, article section.body .flexslider ul { margin-left: 0; margin-bottom: 0; } /* ----- flexslider ----- */ #flexslider .flex-direction-nav, #txt-flexslider .flex-direction-nav { display: none; } #flexslider, #flexslider div { margin-bottom: 0; } #txt-flexslider img { display: block; } #txt-flexslider { height: 40px; margin-bottom: 31px; background: transparent url(/assets/images/common/bg_plus.png) 0 0 repeat; font-size: 16px; line-height: 40px; } #txt-flexslider img { display: block; margin-right: 20px; float: left; } #txt-flexslider ul li a { height: 40px; line-height: 44px; overflow: hidden; display: block; white-space: nowrap; text-overflow: ellipsis; } #txt-flexslider ul li .pannel-right { margin-right: 20px; display: block; float: left; } /* Responsive max-width: 568px --------------------------------------------------------- */ @media screen and (max-width: 568px) { #txt-flexslider { font-size: 14px; } }

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

Web制作 jQuery マルチデバイス対応サイト関連

以前かいたjQueryの記事「jQueryのスライドショーやカルーセルを探してるならこれ使っときんさい!」がSRE BLOG内でアクセス数ダントツ1位を記録しています!

せっかくなので、サンプルコードを掲載してもっと活用してもらおうと企みました!

前回の記事の流れを追うかたちで、よく使うものをご紹介していきます。

エフェクト美しきNivo Slider

何回も言ってますが、エフェクトがきれいで表示切り替えのエフェクトをランダムに設定することができます。テーマもあらかじめいくつか用意されているので、サッとカッコよくしたいときには重宝します。

次の例では、defaultテーマを使用しています。

また、imgタグにdata-thumbを指定すると、サムネイル表示による切り替えもできます。かんたんです。

いいチームで、いい仕事をしよう。 Movable Typeで困ったらご相談ください。設計から構築、プラグイン開発までワンストップ対応 ユーザーの利用環境に合わせてマルチデバイス対応。予算とシステムに合わせた最適化をご提案します。

HTML
<!-- #nivo-slider -->
<div id="nivo-slider" class="nivoSlider">
  <a href="/company/message.php"><img src="/assets/images/index_visual_rinen.jpg" width="920" height="330" alt="いいチームで、いい仕事をしよう。" /></a>
  <a href="/development/cms/"><img src="/assets/images/development/cms_visual.jpg" width="920" height="330" alt="Movable Typeで困ったらご相談ください。設計から構築、プラグイン開発までワンストップ対応" /></a>
  <a href="/development/multidevice/"><img src="/assets/images/development/multidevice_visual.jpg" width="920" height="330" alt="ユーザーの利用環境に合わせてマルチデバイス対応。予算とシステムに合わせた最適化をご提案します。" /></a>
</div>

JavaScript
<script src="/blog/assets/js/jquery/nivo-slider/jquery.nivo.slider.js"></script>
<script>
$(document).ready(function () {
  $('#nivo-slider').nivoSlider({
    effect: 'sliceUpRight'
  });
});
</script>

レスポンシブWebデザイン対応のシンプルスライダー

bxSlider

  • いいチームで、いい仕事をしよう。
  • Movable Typeで困ったらご相談ください。設計から構築、プラグイン開発までワンストップ対応
  • ユーザーの利用環境に合わせてマルチデバイス対応。予算とシステムに合わせた最適化をご提案します。

HTML
<!-- #bxslider -->
<ul id="bxslider">
  <li><a href="/company/message.php"><img src="/assets/images/index_visual_rinen.jpg" width="920" height="330" alt="いいチームで、いい仕事をしよう。" /></a></li>
  <li><a href="/development/cms/"><img src="/assets/images/development/cms_visual.jpg" width="920" height="330" alt="Movable Typeで困ったらご相談ください。設計から構築、プラグイン開発までワンストップ対応" /></a></li>
  <li><a href="/development/multidevice/"><img src="/assets/images/development/multidevice_visual.jpg" width="920" height="330" alt="ユーザーの利用環境に合わせてマルチデバイス対応。予算とシステムに合わせた最適化をご提案します。" /></a></li>
</ul>
<!-- /#bxslider -->

JavaScript
<script src="/assets/js/jquery/jquery.bxslider/jquery.bxslider.js"></script>
<script>
  $('#bxslider').bxSlider({
  });
</script>

FlexSlider

カンパニーサイトのトップページでも使用しています。導入がかんたんなのと、画像だけでなくhtmlもスライドショーができます。特徴としては、2つのhtml要素を同期してスライドできるのがポイントです。

次の例では、画像とテキスト見出しを同時にスライドするようにしています。

HTML
<!-- #flexslider -->
<div id="flexslider" class="flexslider">
  <ul class="slides">
    <li><a href="/company/message.php"><img src="/assets/images/index_visual_rinen.jpg" width="920" height="330" alt="" /></a></li>
    <li><a href="/development/ownedmedia/social.php"><img src="/assets/images/index_visual_social.jpg" width="920" height="330" alt="" /></a></li>
    <li><a href="/socialrecruit/grrefer.php"><img src="/assets/images/index_visual_grrefer.jpg" width="920" height="330" alt="" /></a></li>
    <li><a href="/development/cms/"><img src="/assets/images/index_visual_cms.jpg" width="920" height="330" alt="" /></a></li>
  </ul>
</div>
<!-- /#flexslider -->
<!-- #txt-flexslider -->
<div id="txt-flexslider" class="flexslider clearfix">
  <ul class="slides">
    <li>
      <a class="pannel-link-company" href="/development/">
      <span class="pannel pannel-right pannel-company"></span>いいチームで、いい仕事をしよう。
      </a>
    </li>
    <li>
      <a class="pannel-link-dev" href="/development/ownedmedia/social.php">
      <span class="pannel pannel-right pannel-dev"></span>ソーシャルメディアを活用したWEBサイトの企画・開発ならご相談ください
      </a>
    </li>
    <li>
      <a class="pannel-link-socialrecruit" href="/socialrecruit/grrefer.php">
      <span class="pannel pannel-right pannel-socialrecruit"></span>友だちに求人情報を紹介するソーシャル求人サービス「Grrefer」
      </a>
    </li>
    <li>
      <a class="pannel-link-dev" href="/development/cms/">
      <span class="pannel pannel-right pannel-dev"></span>CMS(Movable Type)の構築ならお任せください
      </a>
    </li>
  </ul>
</div>
<!-- /#txt-flexslider -->

JavaScript
<script src="/assets/js/jquery/FlexSlider/jquery.flexslider.js"></script>
<script>
$(window).load(function() {
  $('#flexslider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: true,
    slideshow: true,
    slideshowSpeed: 4000,
    itemWidth: 920,
    itemMargin: 0
  });
  $('#txt-flexslider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: true,
    slideshow: true,
    slideshowSpeed: 4000,
    itemWidth: 920,
    itemMargin: 0
  });
});
</script>

jQuery、おもしろいですよね!また投稿しますね

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

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

お問い合せはこちら