軽量、設置簡単、コード簡単なギャラリーサイトや、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

それでは、また。