jQuery.Brazzers-Carousel.jsを使ったカルーセル表示の簡単設置方法：複数画像対応｜DAD UNION

今回はjQuery.Brazzers-Carousel.jsを使用して、魅力的な画像カルーセルを作成する方法を紹介します。この手法は、ウェブサイトに動きと興味を加える素晴らしい方法です。特に初心者の方にも理解しやすいように解説していきますので、一緒に学んでいきましょう！

Contents

はじめに
CSSの設定
HTMLの準備
JavaScriptでカルーセル機能を実装
jQuery.Brazzers-Carousel.jsを使って複数画像をマウスカーソル移動でカルーセル表示するデモページ
ソース元：Brazzers-Carousel-Repo
まとめ

はじめに

画像カルーセルは、ウェブサイトでよく見かける要素の一つです。ユーザーが画像上をマウスで左右に動かすと、画像がスムーズに切り替わるのを見たことがあるでしょう。このカルーセルを簡単に実装するために、jQuery.Brazzers-Carousel.jsというライブラリを使用します。

CSSの設定

まずは、必要なCSSを設定しましょう。以下のコードをウェブページに追加します。これでカルーセルの基本的なスタイルが設定されます。カルーセルのサイズや位置は、このコードを変更することで調整できます。

jQuery.Brazzers-Carousel.min.cssファイルを読み込みます。カルーセル画像表示エリア（.item）を用意します。

      <style>
        h1{
          text-align: center;
          font-size: 18px;
          padding: 20px 0;
        }
        .item{
          width: 350px;
          margin: 0 auto;
        }
      </style>
      <link rel="stylesheet" href="jQuery.Brazzers-Carousel.min.css">

HTMLの準備

次に、カルーセルに表示する画像をHTMLで設定します。ここでは例としてカルーセル画像表示エリア（class=”item”）に9枚のjpg画像（1～9.jpg）を使用していますが、必要に応じて画像の数は調整できます。

      <h1>画像の上を左右にマウスカーソル移動すると画像が切替り（カルーセル）表示します</h1>

    <div class="item">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      <img src="6.jpg">
      <img src="7.jpg">
      <img src="8.jpg">
      <img src="9.jpg">
    </div>

JavaScriptでカルーセル機能を実装

カルーセルの機能を実現するために、jQuery（jquery-1.11.3.min.js）とjQuery.Brazzers-Carousel.jsを利用します。以下のコードをページに追加して、カルーセル機能を有効にしましょう。$(カルーセル画像表示エリア).brazzersCarousel()を設定するだけです。

  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="jQuery.Brazzers-Carousel.min.js"></script>
  <script>
    $(document).ready(function() {
      $(".item").brazzersCarousel();
    });
  </script>