【設置が簡単】複数画像の上を左右にマウスカーソル移動でカルーセル表示する方法【jQuery.Brazzers-Carousel.js】｜DAD UNION

jQuery.Brazzers-Carousel.jsを使って複数画像の上を左右にマウスカーソル移動すると画像が切替り（カルーセル）表示する方法をご紹介します。

Contents

複数画像の上を左右にマウスカーソル移動でカルーセル表示するCSSの記述
複数画像の上を左右にマウスカーソル移動でカルーセル表示するHTMLの記述
jQuery.Brazzers-Carousel.jsを使って、複数画像の上を左右にマウスカーソル移動でカルーセル表示するJavaScriptの記述
jQuery.Brazzers-Carousel.jsを使って複数画像をマウスカーソル移動でカルーセル表示するデモページ
ソース元：Brazzers-Carousel-Repo

複数画像の上を左右にマウスカーソル移動でカルーセル表示する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の記述

※カルーセル画像表示エリア（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>

jQuery.Brazzers-Carousel.jsを使って、複数画像の上を左右にマウスカーソル移動でカルーセル表示するJavaScriptの記述

※jquery-1.11.3.min.js、jQuery.Brazzers-Carousel.min.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>