さまざまなスタイルが用意されている画像スライダー「Ion.ImageSlider」
当ページのリンクには広告が含まれています。
スポンサーリンク
画像スライドショーjQueryプラグイン「Ion.ImageSlider」を紹介します。
jQueryプラグイン「Ion.ImageSlider」
「Ion.ImageSlider」は、簡単に画像スライドショーが実装できるプラグインです。
「Minimal skin」「Metro skin」「Sexy skin」という3つのスタイルが用意されています。画像をクリックしたポップアップ画像もLightboxなので、なかなかかっこいいです！画像スライドショーを作成する場合の候補のひとつとして、おすすめですね！
スポンサーリンク
かっこいいスタイルの「Sexy skin」を紹介します。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Ion.ImageSlider - jQueryプラグインまとめのカルマ</title>
<link rel="stylesheet" href="css/ion.imageSlider.css">
<link rel="stylesheet" href="css/ion.imageSlider.sexy.css">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="js/ion.imageSlider.js"></script>
<script>
$(document).ready(function() {
$("#mySlider").ionImageSlider({
slideShowDelay: 5
});
});
</script>
</head>
<body>
<div class="ion-image-slider" id="mySlider">
<a href="img/1.jpg"><img src="img/1.jpg" height="260" data-caption="いーち" /></a>
<a href="img/2.jpg"><img src="img/2.jpg" height="260" data-caption="にー" /></a>
<a href="img/3.jpg"><img src="img/3.jpg" height="260" data-caption="さーん" /></a>
<a href="img/4.jpg"><img src="img/4.jpg" height="260" data-caption="しぃー" /></a>
<a href="img/5.jpg"><img src="img/5.jpg" height="260" data-caption="GO!" /></a>
</div>
</body>
</html>
スポンサーリンク