• 被リンク対策 SEO対策
    SEO対策で重要な被リンク元の増やし方 | 初心者向けSEO対策ノウハウ
    2019年05月16日
  • SEO対策 SEO対策
    SEO初心者向けのSEO実践ノウハウ!7個のポイントをご紹介
    2019年05月16日
  • 被リンクの量と質 SEO対策
    SEO対策で重要な被リンク元の数と質 | 初心者向けSEO対策ノウハウ
    2019年05月16日
  • Webデザイン ホームページ制作
    ホームページ制作はスマホファーストの時代!デバイスの多様化に対応
    2019年02月26日
  • ユーザー属性 SEO対策
    SEOでアクセス数アップを目指すには、10のユーザー種別の理解がポイント
    2019年05月16日
  • ブログ
    5分でブログサイト完成!ワードプレスで簡単ブログサイト作成術
    2019年03月28日
  • 採用サイト ホームページ制作
    奈良の求人サイト制作会社が教えるIndeed活用ノウハウ!ダイレクト・リクルーティング
    2019年03月14日
  • 歯医者さんのブログ記事 ブログ集客
    見ているだけ参考になる歯科のブログ3選!歯科のホームページ制作
    2019年03月12日
  • ローカル検索 SEO対策
    ローカルSEOの内部対策!商圏エリアで検索上位を獲得する方法
    2019年05月16日
  • seo対策リンク SEO対策
    SEO対策で重要な被リンク元の調べ方 | 初心者向けのSEO対策ノウハウ
    2019年05月16日
jQueryでカルーセルパネルを実装!簡単jQueryのサンプルコード付き

こんにちは。
JOYCONNECTのデザイン担当、デザインマスターです。

今回はjQueryでカルーセルパネルを実装していきたいと思います。

jQuery初心者向けのブログなので、
安心して読み進めていただけます。

jQueryを使ってカルーセルパネルを実装

jQuery

カルーセルパネルとは、
画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。

まずは作成するカルーセルパネルのHTMLから紹介します。

パネルの表示領域(#carousel)は
#carouselWrapで設定した表示領域と同じサイズになるように、
width:100%とheigh:100%を設定し、
表示領域からはみ出た部分をoverflow:hiddenで非表示にします。

パネル(ul.column)はfloatで横並びにし、
ul.columnの内側のli要素もfloatで横並びにします。

li要素にfloatを指定した場合、
IE6ではサイズがずれてしまうバグがあるので、
display:inlineを設定して回避します。

では次はscriptです。

初期設定では最初にパネル全体を格納する#carouselInnerの横幅を設定しています。

#carouselInnerの横幅は、
表示領域の横幅(620px)×パネル(ul.column)の数です。

次にprependTo()を使って、
最後のパネル(ul.column)を#carouselInnerの先頭位置に移動します。

jQuery

css()でmargin-leftにネガティブマージンを指定し、
#carouselInnerを左方向に620pxずらします。

カルーセルの表示領域は変わりません(overflow:hidden)が、
表示領域外では左側に最後のパネルが移動しています。

続いて、戻るボタン(#carouselPrev)の処理ですが、
#carouselPrevに対してclickイベントを設定し、
クリックされるとパネルを左方向へとスライド移動させる処理を記述します。

クリックイベントでは、
まずhide()で2つのボタンを非表示にし、
スライド処理中にボタンがクリックされないようにします。(表示位置の計算が狂う為)

次に#carouselInnerをanimate()を使ってスライドさせます。

戻るボタンは左から右方向にパネルを移動させたいので、
margin-leftに表示領域の幅(620px)を加算した値を設定します。

すると、スライド全体が右方向にスライドし、
表示中のパネル(ul.column)の前の位置にあるパネルが表示されます。

css(“margin-left”)で取り出す値は
parseIntで整数に変換してから表示領域分を加算します。

スライドアニメーションが終わった後の動作は、
コールバック関数で設定し、ここでは初期設定と同じように、
最後のパネル(ul.column)を#carouselInnerの先頭へ移動させ、
#carouselInnerのmargin-leftを元の値に戻すことで、
現在表示されているul.columnの先頭にul.columnが存在する状態にします。

最後に非表示にしていた2つのボタンを表示状態に戻せば、
戻るボタンの処理は完成です。

進むボタンは戻るボタン同様の処理を設定します。

進むボタンの場合は、
右から左にパネルをスライドさせたいので、
margin-leftには表示領域分だけ減算した値を設定します。

また最初のパネル(ul.column)をappendTo()で#carouselInnerの最後に移動させます。

>>デモをチェックする

カルーセルパネルを自動的にスライドさせる

次にカルーセルパネルを勝手にスライドするように作り変えます。

この場合、タイマーを仕込めば、
一定間隔で自動的にスライドするカルーセルパネルが作れます。

setInterval()はJavaScriptの命令で、
function(){…}内に記述した処理を一定間隔で繰り返し実行します。

$(“#carouselNext”).click()は、
#carouselNextに設定されているclickイベントを実行するという意味です。

最後にユーザーが直接カルーセルを操作できるように、
戻る、進むボタンがクリックされた際に、タイマー処理を停止させれば完成です。

>>デモをチェックする

関連キーワード
  • スライドギャラリー
    Flash非対応デバイス用のスライドギャラリーを実装!jQueryのサンプルコード付き
  • Ajax
    初心者向けjQuery!Ajaxでスムーズページングを実装 サンプルコード付き
  • SSL対応
    SSL対応ってなに?SSLの仕組みと意味をわかりやすく解説
  • jQuery
    jQueryでカルーセルパネルを実装!簡単jQueryのサンプルコード付き
  • jQuery
    jQueryの基本的な書き方!JavaScriptの基本文法を紹介
  • progressbar.js
    プログレスバーを超簡単に実装できるprogressbar.jsを分かりやすく紹介
ホームページ制作・WEBコンサルティングのご相談は無料

JOYCONNCTでは、社内の人材不足やノウハウ不足により、
WEB集客に関するお悩みを抱えられている中小企業様のサポートをしております。

TEL: 0742-55-4737/営業時間: 9:00〜18:00(平日)

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事