今日の人気記事

  1. カラー・位置・サイズを調節できるスクロールバーを追加「slimScroll」
  2. 画像ポップアップ・スライドショー「Lightbox 2」
  3. 文字数に応じてテキストエリア高さを自動調節「autoexpand」
  4. 簡単にドロップダウンメニューがつくれる「Superfish」
  5. select要素の複数選択フォームを実装「Multiple Select」

レスポンシブ対応の回る画像スライダー「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>
スポンサーリンク

関連記事(一部広告含む)