まだデータがありません。
レスポンシブ対応の回る画像スライダー「ImgWheel」
当ページのリンクには広告が含まれています。
スポンサーリンク
レスポンシブ対応の回る画像スライダーを実装するプラグイン「ImgWheel」を紹介します。
jQueryプラグイン「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>
スポンサーリンク