見出し画像

jQuery/プラグイン無しでスライダー機能を（とにかく簡単に）実装する

Adv_yh

「jQuery使用不可」かつ「ラジオボタンが無効化されている」という環境でスライダーを実装せざるを得なくなったので備忘録代わりにまとめた。
本当はもっとスマートな方法があるのかもしれないけれど、似たような環境で困っている人も居るように思うので、拙いながら公開する。

方針と考え方

横に画像を並べるタイプのスライダーはブラウザのサイズに合わせてサイズを変化させるのが面倒なので避けた。
考え方は単純で、absoluteで画像を浮かせて、opacity と z-indexで、表示・非常時を切り替える。これをページロード時のアニメーションと、ボタンクリックに対してjavascriptで発動させればよい。
スライダーの配置構造については、このサイトを

javascriptによるスライダーの制御は、このサイトを

https://blog.ver001.com/javascript-image-slides/

参考にした。
自分は、これらを組み合わせただけ。

記述

HTML

body内を抜粋。
スライダー画像はリストで、切り替えボタンはボタンを配置している。

<body>
    <div class="header">header</div>
    <div class="main">
        <p>最大幅980px</p>
        <ul class="slider">
            <li class="slides"><a href="#hogehoge1"><img class="slide_img" src="/test/images/slider_001.jpg"></a></li>
            <li class="slides"><a href="#hogehoge2"><img class="slide_img" src="/test/images/slider_002.jpg"></a></li>
            <li class="slides"><a href="#hogehoge3"><img class="slide_img" src="/test/images/slider_003.jpg"></a></li>
            <li class="slides"><a href="#hogehoge4"><img class="slide_img" src="/test/images/slider_004.jpg"></a></li>
        </ul>
        <div class="slide_btns">
            <button class="slide_btn" onclick="slide_btn_func(1)">ボタン1</button>
            <button class="slide_btn" onclick="slide_btn_func(2)">ボタン2</button>
            <button class="slide_btn" onclick="slide_btn_func(3)">ボタン3</button>
            <button class="slide_btn" onclick="slide_btn_func(4)">ボタン4</button>
        </div>
        <div>
            <div id="hogehoge1">hogehoge1</div>
            <div id="hogehoge2">hogehoge2</div>
            <div id="hogehoge3">hogehoge3</div>
            <div id="hogehoge4">hogehoge4</div>
        </div>
    </div>
    <script src="js/test.js"></script>
</body>

CSS

例えばサイトの幅が980pxに抑えられているサイトだったと仮定する。

@charset "utf-8":
.main {
    max-width: 980px;
    margin-right: auto:
    margin-left:auto;
    padding:0;
    background-color: #3c3c3c30;
}

スライダーの外枠

.slider {
    list-style: none;
    position: relative;
    padding: 0;
}

個別のスライダーはabsoluteで浮かせ、幅100％にすることでページ幅いっぱい表示させる。初期状態では、透明にしておき、優先順位も最背面にしておく。また、アニメーションの際にオーバーラップさせたいのでトランジションを設定しておく。

.slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    opacity: 0;
    transition: 0.5s;
}

absoluteのママでは、スライダーの次に配置する要素がスライダーの下に隠れてしまうので、最初の1枚だけ、relativeにしておくことで高さ情報を与える。

.slides:first-child {
    position: relative;
    top: 0;
    left: 0;
}

スライド内の画像も幅100%にする

.slide_img {
    display: block;
    max-width: 100%;
    height: auto;
}

ボタンは何でも良い。一般的にはマウスオーバーで色が変わるのがわかりやすいだろう。

.slide_btns {
    position: relative;
    width: 100%;
    margin-top: 10px;
    displya: flex;
    justifi-content: center;
}
.slide_btn {
    border: 2px solid #cf6cf5;
    margin: 5px;
    border-radius: 10px;
    cursor: pointer;
}
.slide_btn:hover {
    background: #cf6cf5;
}

JavaScript

ページロード時にスライダーを発動させる。opacity と z-index を使い、今の要素を消して次の要素を順番に表示させる。
こちらのサイトを参考にしたので、詳細はそちらへ。

https://blog.ver001.com/javascript-image-slides/

window.onliad = slider;
function slider() {
    let slides = document.getElementsByClassName("slides");
    slides[0].style.opacity=1;
    slides[0].style.zIndex=1;
    showSlide(3000);
    function showSlide(msec,slide_no=-1){
        if (slides[slide_no]) {
            slides[slide_no].style.opacity=0;
            slides[slide_no].style.zIndex=0;
        }
        slide_no++;
        if (slides[slide_no]) {
            slides[slide_no].style.opacity=1;
            slides[slide_no].style.zIndex=1;
        } else {
            slides[0].style.opacity = 1;
            slides[0].style.zIndex = 1;
            slide_no = 0;
        }
        setTimeout(function(){
            showSlide(msec,slide_no);
        },msec);
    }
}

もうひとつは、ボタンのオンクリックでスライド画像の表示を切り替える関数。引数にスライド番号を与えることで、何番目のスライドを表示にさせるかを決めている。
※こういうクラスの使い方をするとページ内で何箇所も使えないので、本当は良くない気がする。適宜適切に対応して欲しい

function slide_btn_func(num){
    let slides = document.getElementsByClassName("slides");
    for (let i =0;i < slides.length;i++) {
        slides[i].style.opacity=0;
        slides[i].style.zIndex=0;
    }
    slides[num-1].style.opacity =1;
    slides[num-1].style.zIndex =1;
}

デモンストレーションを表示できないが、ヘッダーのような感じになる。

以上