jQueryで一から作る自作スライダー【中級編①】

はじめに

今回は、下記のワイヤーフレームを元に、一からスライダーを制作していきます。

全体のコード一覧

See the Pen 一から作る自作スライダー by Uka Suzuki (@uukasuzuki_) on CodePen.

CSS3のコード解説

/* スライダー */
.slider {
    position: relative;
    width: 60%;
    margin: 50px auto;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    transition: transform 0.5s ease-in-out;
}

• スライダーの大枠の部分では、transition: transform 0.5s ease-in-out;で簡単な動きを付けています。transitionとは、要素が別の状態に変わる時、その変化がどのようにアニメーションされるかを指定します。

• ease-in-outは、transitionのタイミング関数を指定します。
  アニメーションがゆっくり始まり、途中で速くなり、最後にまたゆっくり終わる効果を作り出します。

/* 矢印 */
.navigation {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    cursor: pointer;
}

/* ページネーション */
.indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.indicators .dot {
    width: 10px;
    height: 10px;
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
}

• transform: translateY(-50%);とは、CSSで要素を垂直方向に移動させるための指定です。
  これを使用することで、要素をその現在の位置から上下方向に移動させることができます。

• この場合、要素の高さの50%分だけ上方向に移動させることを意味します。パーセントで指定する場合、要素自身の高さに対して移動する距離が計算されます。つまり、-50% は要素の高さの半分だけ上にシフトさせるということを意味します。

• 逆にtranslateX()は、CSSで要素を水平方向に異動させるための指定です。
  この指定は、要素をその現在の位置から相対的に移動させます。これは、要素を中央に配置したいときによく使われます。

.indicators .dot {
    width: 10px;
    height: 10px;
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
}

.indicators .dot.active {
    background-color: #333;
}

• background-color: #bbb;は、選択されていない状態のドットの色を表しています。

• .indicators .dot.activeは、選択されている現在のドットの色を表しています。
  .activeクラスを付与すると、選択されている、または表示されている要素を示すために使用されます。

jQueryのコード解説

$(document).ready(function() {
    var currentIndex = 0;
    var slides = $('.slide');
    var slideCount = slides.length;

• ページのDOMが完全に読み込まれた後にコードが実行されるよう指示した後、変数の初期化が行われます。currentIndexは現在表示されているスライドのインデックスを管理するための変数を表します。初期値は0（最初のスライドを指します）

• slidesで、全てのスライド要素を取得し、slidesという変数に格納。slideCountで、スライドの総数を取得します。

function updateSlidePosition() {
    var offset = -currentIndex * 100 + '%';
    $('.slides').css('transform', 'translateX(' + offset + ')');
    updateIndicators();
}

• offsetとは、現在のスライドのインデックスに基づいて、スライドをどれだけ移動させるかを計算します。

• updateIndicatorsは、インジケーターの更新を行うための関数です。現在表示されているスライドに対応するドットをアクティブ状態にします。

function updateIndicators() {
    $('.dot').removeClass('active');
    $('.dot').eq(currentIndex).addClass('active');
}

• eq(currentIndex)は、現在のスライドのインデックスに対応するドットを選択します。
  また、.removeClassにより、全てのドットからactiveクラスを削除します。そして.addClass('active')では、選択したドットにactiveクラスを追加し、アクティブ状態にします。

$('.next').click(function() {
    currentIndex = (currentIndex + 1) % slideCount;
    updateSlidePosition();
});

$('.prev').click(function() {
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    updateSlidePosition();
});

• nextボタンがクリックされたとき、currentIndexが1増加します。

• currentIndexがスライドの総数に達すると、0に戻り、ループします。そして、updateSlidePosition()によりスライドを更新させます。

• prevボタンがクリックされたとき、currentIndexが1減少します。

• currentIndexが負の値になった場合、スライドの総数から1を引いた値に設定され、最後のスライドに戻ります。

$('.dot').click(function() {
    currentIndex = $(this).index();
    updateSlidePosition();
});

updateSlidePosition();

• ドットがクリックされたとき、そのドットのインデックスがcurrentIndexに設定されます。そして、updateSlidePositionにより、スライドを更新します。

• 最後に、updateSlidePosition();は、ページが読み込まれた時に、初期状態としてスライドとインジケーターを正しく表示するために呼び出されます。

まとめ

今回は、HTMLの組み合わせが簡単な分、CSSでpositionやtransformによる動きの部分を考えるのに苦労しました。また、jQueryの各動きとコードの書き方は、まだまだ理解が追い付いていない状態です。