シームレスな画像スライダーを実装する「Seamless Image Slider」を紹介します。
jQueryプラグイン「Seamless Image Slider」
このプラグインを使えば、左端に消えた画像が右端から現れるシームレスな画像スライダーを実装することができます。
オプションでは、画像の大きさ・背景の色・スライド速度・スライダーの枠線などさまざまなオプションが指定できるので、画像スライダーの候補のひとつとしてオススメです。
デモのシームレス画像スライダーをご覧ください。
「Seamless Image Slider」のデモ
デモのソース(HTML + jQuery)
< 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 > |
< 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 > |
$("#scroller_roll1").scroller_roll({ |
// window_background_color: "#C1F0FF", |
< h1 >Seamless Image Sliderのデモでーす。</ h1 > |
< div id = "scroller_roll1" class = "scroller_roll" > |
< 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 > |
jsファイルのダウンロード、さまざまなオプションやその他の詳細はこちらからどうぞ。
» Seamless Image Slider