レスポンシブ対応の回る画像スライダー「ImgWheel」

当ページのリンクには広告が含まれています。

jQuery Plugin » 画像 » レスポンシブ対応の回る画像スライダー「ImgWheel」

レスポンシブ対応の回る画像スライダーを実装するプラグイン「ImgWheel」を紹介します。

jQueryプラグイン「ImgWheel」

このプラグインを使えば、マウスオーバーすると画像がくるくる回るレスポンシブ対応の画像スライダーを実装することができます。

画像は左右のどちらにも回転し、最後の画像の次にははじめの画像が表示されるので、エンドレスに回転します。

また、レスポンシブ対応なので、どのようなサイトにも利用しやすいですね。

それではデモページの画像スライダーをご覧ください。

「ImgWheel」のデモ

ソース（ HTML + jQuery ）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="ImgWheel のデモでーす。">
<title>ImgWheel - jQuery Plugin Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="jquery.ImgWheel.min.js"></script>
<script>
$(document).ready( function() {
  $('#demo').ImgWheel();
});
</script>
<link rel="stylesheet" href="ImgWheel_site/style.css"></link>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/imgwheel/">「jQueryプラグインまとめ」に戻る</a></p>
 
<h1>ImgWheel のデモでーす。</h1>
<div id="demo">
  <div class="image-container">
    <img src="images/red.png" alt="赤" >
    <img src="images/orange.png" alt="橙" >
    <img src="images/yellow.png" alt="黄" >
    <img src="images/green.png" alt="緑" >
    <img src="images/blue.png" alt="青" >
    <img src="images/indigo.png" alt="藍" >
    <img src="images/purple.png" alt="紫" >
  </div>
</div>
</body>
</html>

jQueryプラグイン「ImgWheel」

ソース（ HTML + jQuery ）

関連記事（一部広告含む）