JavaScript

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

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

ソース元:Brazzers-Carousel-Repo

以下がソース元です。
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>

CSShakeを使って各要素を振るえるアニメーションさせたデモページ

jQuery.Brazzers-Carousel.jsを使って複数画像をマウスカーソル移動でカルーセル表示するデモページ

 

※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。