今日の人気記事

  1. 配列に指定したテキストが切り替わるスライダー「Text Slider」
  2. アプリのようにスライドするレスポンシブメニュー「mmenu」
  3. リストやテーブルから文字列を検索(絞り込む)「Searcher」 - jQueryプラグイン
  4. フォームにリセットボタンを追加「Add Clear」
  5. 「時」「分」「AM/PM」を個別に選択する時間入力「Timepicki」

マウス操作でぬるっとスクロールする画像スライダー「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>
スポンサーリンク

関連記事(一部広告含む)