マウス操作でぬるっとスクロールする画像スライダー「Tekslider a touch focused slider」
当ページのリンクには広告が含まれています。
スポンサーリンク
マウス操作でぬるっとスクロールする画像スライダーを実装するプラグイン「Tekslider a touch focused slider」を紹介します。
jQueryプラグイン「Tekslider a touch focused slider」
このプラグインを使えば、iPhone/iPadのタッチ操作でおなじみのぬるっとスクロールをWeb上の画像スライダーに実装することができます。
オプションでは、スライドのアクセラレータ（加速度）などの数値を設定することができるので、お好みのぬるぬる速度をさがしてみましょう。
スポンサーリンク
それではデモページをご覧ください。
「Tekslider a touch focused slider」のデモ
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tekslider a touch focused slider - jQueryプラグイン</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<style>
.contents {
margin-top: 220px;
}
</style>
</head>
<body>
<div class="tekcontainer">
<div class="slide"><img src="images/red.png" width="240" height="180" alt="赤" ></div>
<div class="slide"><img src="images/orange.png" width="240" height="100" alt="橙" ></div>
<div class="slide"><img src="images/yellow.png" width="240" height="180" alt="黄" ></div>
<div class="slide"><img src="images/green.png" width="240" height="100" alt="緑" ></div>
<div class="slide"><img src="images/blue.png" width="240" height="180" alt="青" ></div>
<div class="slide"><img src="images/indigo.png" width="240" height="100" alt="藍" ></div>
<div class="slide"><img src="images/purple.png" width="240" height="180" alt="紫" ></div>
<div class="slide"><img src="images/red.png" width="240" height="100" alt="赤" ></div>
<div class="slide"><img src="images/orange.png" width="240" height="180" alt="橙" ></div>
<div class="slide"><img src="images/yellow.png" width="240" height="100" alt="黄" ></div>
<div class="slide"><img src="images/green.png" width="240" height="180" alt="緑" ></div>
<div class="slide"><img src="images/blue.png" width="240" height="100" alt="青" ></div>
<div class="slide"><img src="images/indigo.png" width="240" height="180" alt="藍" ></div>
<div class="slide"><img src="images/purple.png" width="240" height="100" alt="紫" ></div>
</div>
<div class="contents">
<h1>Tekslider a touch focused slider のデモでーす。</h1>
<p>画像をスライドしてみてください。</p>
</div>
<script src="js/modernizr-custom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="js/jquery.tekslider.0.3.min.js" ></script>
<script>
$(document).ready(function(){
$("div.tekcontainer").TekSlider({
touch : Modernizr.touch,
animation : true,
accelerator : {
accel : 50,
maxvel : 280,
threshold : 10,
stopthreshold : 8,
timer : 20
}
});
});
</script>
</body>
</html>
スポンサーリンク