Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

jQuery

Web初心者がjQuery 「dbpasCarousel」を使ってバナーやテキストなどのコンテンツを横にスライドさせて表示させる(カルーセル)を実装する方法(サンプル付き)

投稿日:

バナーがたくさんあって困ったことありませんか?
バナーを設置するスペースが無いときに限られたスペースの中でスライドをさせるjQueryがあります。

今回は、web初心者向けにwebサイト上で配布しているスクリプトを使ってバナーやテキストなどのコンテンツを横にスライドさせて表示させるjQueryを実装します。

dbpasCarousel

URLhttp://dbpas.github.io/dbpasCarousel/

カルーセルパネルとは、Webデザインの一種で、画像などのコンテンツをスムーズに横にスライドさせる表示方法のことである。

カルーセルパネルを利用することで、狭いエリアに複数のコンテンツを表示させることができる。主にJavaScriptとCSSの組み合わせてなどによって実現される。

カルーセルパネルの「カルーセル」(carousel)は「回転木馬」を意味する英語である。多くの場合、リストの左右の端に達すると逆側の端にループするように設計されるため、あたかも回転木馬が一周したかのように見える。ボタンを押すことでスライドを制御できるタイプや、一定時間をおいて自動でスライドするタイプ、中心に位置するコンテンツを拡大して表示するタイプなど、複数の細かいバリエーションがある。

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

ファイルをダウンロード STEP2

ダウンロード

Download Zip」がありますのでクリックしてください。

「Download ZIP」をクリックするとファイル一式をダウンロードできます。

データを解凍します STEP3

「Download Zip」をサイトからダウンロードして、zipファイルを解凍します。

解凍すると
データを解凍します
データが入っています。

HTMlに実際に動く記述を書きます STEP4

<script>
    $(document).ready(function() {
      $('ul').dbpasCarousel({options});
    });
  </script>

基本形はこの形で、この中のoptionsに追記していきます

Option Description 初期値
itemsVisible 表示させるコンテンツの数 2
slideDelay スライドさせるスピード 500
autoSlide 自動でスライドさせる場合は、1を設定 0
autoDelay 自動でスライドさせる時の切り替えスピード 500
hoverPause マウスオーバーした時にストップさせる 1
imgCaption 画像のaltを表示させる 1

今回、画像の枚数と、自動スライドの機能をつけてみます。

<script>
    $(document).ready(function() {
      $('ul').dbpasCarousel({
          
		  //表示させる画像の枚数を3枚
		  itemsVisible: 3,
          
		  //自動でスライドする
		  autoSlide: 1
        });
      });
</script>

HTMLを設置します STEP5

<ul id="pics">
  <li><img src="http://lorempixel.com/100/100/abstract" /></li>
  <li><img src="http://lorempixel.com/100/100/animals" /></li>
  <li><img src="http://lorempixel.com/100/100/nature" /></li>
  <li><img src="http://lorempixel.com/100/100/people" /></li>
</ul>

画像は何枚でも大丈夫です。

jQueryとcssを付けます STEP6

jsとcssを付けます

赤枠で囲った
「jquery.dbpas.carousel.css」
「jquery.dbpas.carousel.js」
をSTEP1でjQueryのコードの下に追加します。

※cssとjsファイルはご自身の環境に合わせてください

<script src="js/018/jquery.dbpas.carousel.js"></script>
<link rel="stylesheet" type="text/css" href="css/018/jquery.dbpas.carousel.css" />

まとめ

[サンプル] バナーやテキストなどのコンテンツを横にスライドさせて表示させる

よくわからなかった人もいるかもしれませんが、画像が多くてスペースがない場合にカルーセルはよく使われますのでぜひ試してみてください。

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-jQuery

Copyright© Sedori Plan , 2019 All Rights Reserved.