ホームページを作る人のネタ帳

軽量、設置簡単、コード簡単なギャラリーサイトや、ECサイトで使えるカルーセルプラグイン

カルーセルプラグイン
それはとても軽量で、簡単なカルーセルプラグインです。

ギャラリーサイト、画像を中心としたブログ、そしてECサイトなどで使われる事を目的としたイメージカルーセルを設置したい時につかってみてください。

機能はシンプル


マウスをのせる、画像が変わる

これだけです。

ただし、画像にマウスをのせる場所に応じて画像を変えられるというのがポイントです。
カルーセル


1) Plug in CSS: 
<link rel="stylesheet" href="css/jQuery.Brazzers-Carousel.min.css"> 

2) Plug in jQuery: 
<script href="js/jQuery.js"></script> 

3) Plug in Brazzers Carousel JS: 
<script href="js/jQuery.Brazzers-Carousel.min.js"></script> 

4) Add HTML Markup with images of the same proportions: 

<span class="thumb-item">
<img src="img/image-1.jpg" alt="Alt">
<img src="img/image-2.jpg" alt="Alt">
<img src="img/image-3.jpg" alt="Alt">
</span>

5) Start the plug-in:

$(".thumb-item").brazzersCarousel();

わりとマウスをのせるだけで変わるので、直ぐに気がつく仕様ではあります。

で、実際スマホの方も試したんですが、リンクが貼られていないので、タッチで画像を変更する感じです。
正直画像の部位をタッチするとか、ユーザビリティとしてはちょっと無理があるので、スマホ版では使えなさそうな感じでした。

PC版で少し画像領域を小さくしたいなという時に使ってみてくださいね。
jQuery Brazzers Carousel Plugin

それでは、また。
yamada
Posted byyamada

Comments 0

There are no comments yet.

Leave a reply