シームレスな画像スライダー「Seamless Image Slider」
当ページのリンクには広告が含まれています。
スポンサーリンク
シームレスな画像スライダーを実装する「Seamless Image Slider」を紹介します。
jQueryプラグイン「Seamless Image Slider」
このプラグインを使えば、左端に消えた画像が右端から現れるシームレスな画像スライダーを実装することができます。
オプションでは、画像の大きさ・背景の色・スライド速度・スライダーの枠線などさまざまなオプションが指定できるので、画像スライダーの候補のひとつとしてオススメです。
スポンサーリンク
デモのシームレス画像スライダーをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Seamless Image Sliderのデモでーす。">
<title>Seamless Image Slider - jQueryまとめのカルマ</title>
<link href="css/scroller_roll.css" rel="stylesheet" type="text/css"></link>
<style>
.scroller_roll {
margin: 30px auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="js/scroller_roll.js"></script>
<script>
$(function() {
$("#scroller_roll1").scroller_roll({
title_show: 'enable',
time_interval: '15',
// window_background_color: "#C1F0FF",
window_padding: '10',
border_size: '0',
border_color: '#0099CC',
images_width: '180',
images_height: '100',
images_margin: '20',
title_size: '16',
title_color: 'black',
show_count: '4'
});
});
</script>
</head>
<body>
<h1>Seamless Image Sliderのデモでーす。</h1>
<div id="scroller_roll1" class="scroller_roll">
<ul>
<li><a href="#" title="赤だよ〜。"><img src="images/red.png"></a></li>
<li><a href="#" title="橙だよ〜。"><img src="images/orange.png"></a></li>
<li><a href="#" title="黄だよ〜。"><img src="images/yellow.png"></a></li>
<li><a href="#" title="緑だよ〜。"><img src="images/green.png"></a></li>
<li><a href="#" title="青だよ〜。"><img src="images/blue.png"></a></li>
<li><a href="#" title="藍だよ〜。"><img src="images/indigo.png"></a></li>
<li><a href="#" title="紫だよ〜。"><img src="images/purple.png"></a></li>
</ul>
</div>
</body>
</html>
jsファイルのダウンロード、さまざまなオプションやその他の詳細はこちらからどうぞ。
» Seamless Image Slider
スポンサーリンク