CODE jQuery

div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」

投稿日:2019年10月22日 更新日:

div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」

「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>

機能的にはシンプルですが、うまくカスタマイズしたら表現範囲も広がりそうです。

-CODE, jQuery
-,

Copyright© キツネノシッポ , 2020 All Rights Reserved Powered by STINGER.