[JS]各パネルのリンクに対応した、シンプルなコンテンツスライダーのスクリプト -hash slider

各パネルへの個別リンクに対応、マウスホイールでの操作も可能なコンテンツスライダーのスクリプトを紹介します。

デモのキャプチャ

hash slider
デモ:3番目を表示

[ad#ad-2]

hash sliderの主な特徴

  • 設置が簡単。
  • スタイルシートで簡単にデザインのカスタマイズが可能。
  • マウスホイールでスライド操作が可能。
  • #のリンクで各パネルの個別リンクにも対応。
  • 番号のナビゲーションは自動で生成。
  • 個人でも商用でも完全に無料。
  • 2.2KBと超軽量サイズ。

[ad#ad-2]

hash sliderの実装

実装は簡単です。

HTML

各パネルは、リスト要素で実装します。

<div id="slider">
<ul>
<li>パネル1</li>
<li>パネル2</li>
</ul>
</div>

<div id="left"> 左へスライド </div>
<div id="right"> 右へスライド</div>

<ul id="numbers">
<li></li>
</ul>

L.3, 4のli要素はパネルの枚数に伴い増やしてください。
ナビゲーションはL.8, 9の左右へスライド、L.11-12の番号のナビゲーションの二つが設置可能です。番号のナビゲーションは自動で生成されます。

JavaScript

hash sliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/hashslider_minified.js"></script>

jsファイルを外部ファイルとして記述するだけです。
HTMLで使用する各id名を変更する場合は、スクリプト内のそれぞれの箇所を変更します。

あとは、CSSで自由にデザインを行います。

sponsors

top of page

©2018 coliss