「jQuery Slider2」は、簡単に画像や文字をスライドさせてスライダーを作ることができる軽量のJavaScriptです。
<div>～</div>で囲んだdiv要素ごとにスライドさせるので、設置も簡単です。
「jQuery Slider2」は古いjQueryプラグインで、公式サイトもなくなっていますが、最新バージョンのjQueryでも動作しました。
とてもシンプルで軽いので、使いようでは今でも十分にスライダーとして使えます。
サンプルはこちらになります。
「jQuery Slider2」の設置方法は続きをご覧下さい。
「jQuery Slider2」の設置方法
まず、jQuery Slider2のGutHubから、「Download ZIP 」をクリックしてファイルを一式ダウンロードします。
ダウンロードしたzipファイルを解凍します。使用するファイルは以下になります。
- jquery.slider.min.js
- jquery.slider.css
まず、<head>~</head>部分にjQuery本体とjquery.slider.min.js、jquery.slider.cssをパスに注意して記述をします。
<link href="css/jquery.slider.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.slider.min.js"></script>
今回はjQuery CDNを利用していますが、jQuery本体をダウンロードしてきて利用してもかまいません。jQuery 3.xでも動作しました。
続いてscriptを記述します。
<script type="text/javascript">
$(function() {
$('#ID名').slider({ //スライドさせる部分の#ID名
showControls: true, // 矢印を表示するか
autoplay: true, // 自動再生するか
showPosition: true, // ポジションを表示するか
hoverPause: true, // Hover時に一時停止するか
wait: 3500,
fade: 500,
direction: "left"
});
});
</script>
<body>部分に表示させたいテキストや画像などをdiv要素で囲んで記述します。
<div id="ID名">
<div>
コンテンツ-1
</div>
<div>
コンテンツ-2
</div>
<div>
コンテンツ-3
</div>
<!-- 以下スライド分 -->
</div>
のように記述します。
最後にサンプルのソースを書いておきます。どうぞご参考まで。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<title>jQuery Slider2サンプル | キツネノシッポ</title>
<link href="css/jquery.slider.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slider.min.js"></script>
<script>
$(function() {
$('#slider').slider({
showControls: true,
autoplay: true,
showPosition: true,
hoverPause: true,
wait: 3500,
fade: 500,
direction: "left"
});
});
</script>
<style>
#slider div {
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>jQuery Slider2 サンプル</h1>
divで囲んだ部分がスライドします。<br />
マウスを乗せるとスライドがストップします。外すと再びスライドが始まります。
<div id="slider" style="width: 500px;height: 300px; border: 1px solid #CCC;">
<div>
<h2>div要素をスライドさせます.</h2>
</div>
<div style="background-image: url(img/img1.jpg);color:#FFF;">
<h2>Page2</h2>
<q>画像もテキストもリンクも。</q>
</div>
<div style="background-image: url(img/img2.jpg);color:#FFF;">
<h2>Page3</h2>
<q>サンプル</q>
</div>
</div>
</body>
</html>
機能的にはシンプルですが、うまくカスタマイズしたら表現範囲も広がりそうです。