基本のスライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

スライダー

基本のスライダーを作る方法

基本のスライダーを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptだけを使って、左右のボタンやドットナビゲーションでスライドを切り替えられるシンプルなスライダーを実装しています。1枚ずつスライドを表示する基本構成になっているため、初めてスライダーを作る方でも仕組みを理解しながら導入できます。

スライダーはトップページのメインビジュアルやお知らせ、サービス紹介、商品紹介、キャンペーンバナーなど、限られたスペースで複数の情報を順番に表示したい場面で活用できます。左右のボタンによる移動とドットナビゲーションによる直接移動に対応しており、現在表示しているスライドも分かりやすく確認できます。スマートフォン・タブレット・PCでも利用しやすいレスポンシブ対応です。

掲載しているコードはHTML・CSS・JavaScriptをファイルごとに分けているため、デザインやスライド内容を変更しながらカスタマイズしやすい構成になっています。スライド内の見出しや説明文、色、余白、ボタンのデザインなども自由に変更できるため、実際のWebサイトにも導入しやすい基本的なスライダーとして利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

基本のスライダー

左右のボタンまたはドットをクリックすると、スライドを1枚ずつ切り替えられます。

HTML

HTMLでスライダー全体と表示するスライドを配置します。

CSS

CSSでスライド、ボタン、ドットのデザインを設定します。

JavaScript

JavaScriptでスライドを1枚ずつ左右へ切り替えます。

左右のボタンまたはドットをクリックすると、3枚のスライドを順番に確認できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>基本のスライダー</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- スライダー全体 -->
  <div class="basic-slider_wrap">

    <!-- タイトル -->
    <div class="basic-slider_title">
      基本のスライダー
    </div>

    <!-- 説明文 -->
    <p class="basic-slider_text">
      左右のボタンまたはドットをクリックすると、スライドを1枚ずつ切り替えられます。
    </p>

    <!-- スライダー操作エリア -->
    <div class="basic-slider_area">

      <!-- 前のスライドへ移動するボタン -->
      <button
        class="basic-slider_button basic-slider_prev"
        type="button"
        aria-label="前のスライド">
        &lsaquo;
      </button>

      <!-- スライド表示エリア -->
      <div class="basic-slider_view">

        <!-- 3枚のスライドを横並びにする要素 -->
        <div class="basic-slider_track">

          <!-- 1枚目のスライド -->
          <div class="basic-slider_slide">

            <!-- スライド見出し -->
            <div class="basic-slider_slide-title">
              HTML
            </div>

            <!-- スライド説明文 -->
            <p class="basic-slider_slide-text">
              HTMLでスライダー全体と表示するスライドを配置します。
            </p>

          </div>

          <!-- 2枚目のスライド -->
          <div class="basic-slider_slide">

            <!-- スライド見出し -->
            <div class="basic-slider_slide-title">
              CSS
            </div>

            <!-- スライド説明文 -->
            <p class="basic-slider_slide-text">
              CSSでスライド、ボタン、ドットのデザインを設定します。
            </p>

          </div>

          <!-- 3枚目のスライド -->
          <div class="basic-slider_slide">

            <!-- スライド見出し -->
            <div class="basic-slider_slide-title">
              JavaScript
            </div>

            <!-- スライド説明文 -->
            <p class="basic-slider_slide-text">
              JavaScriptでスライドを1枚ずつ左右へ切り替えます。
            </p>

          </div>

        </div>

      </div>

      <!-- 次のスライドへ移動するボタン -->
      <button
        class="basic-slider_button basic-slider_next"
        type="button"
        aria-label="次のスライド">
        &rsaquo;
      </button>

    </div>

    <!-- ドットナビゲーション -->
    <div class="basic-slider_dots">

      <!-- 1枚目を表示するドット -->
      <button
        class="basic-slider_dot is-active"
        type="button"
        aria-label="1枚目のスライドを表示">
      </button>

      <!-- 2枚目を表示するドット -->
      <button
        class="basic-slider_dot"
        type="button"
        aria-label="2枚目のスライドを表示">
      </button>

      <!-- 3枚目を表示するドット -->
      <button
        class="basic-slider_dot"
        type="button"
        aria-label="3枚目のスライドを表示">
      </button>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>
コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成された基本的なスライダーです。HTMLではスライダー本体や3枚のカード、左右の操作ボタンを配置し、CSSでレイアウトやデザインを整えています。JavaScriptでは左右ボタンによるスライド切り替えを実装しており、1枚ずつ横へ移動するシンプルな動作を確認できます。 

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlではスライダー全体の構造を作成します。カードの見出しや説明文、左右ボタンなどを配置しており、カードの内容を自由に変更できます。

style.cssではスライダーの横幅、カードのデザイン、ボタンの位置や色、余白、角丸など見た目全体を設定します。レスポンシブ表示もこのファイルで行います。

script.jsでは左右ボタンをクリックしたときのスライド切り替え処理を管理します。現在表示中のカード番号を保持し、最初や最後ではそれ以上移動しない基本動作を実装しています。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置してください。同じ階層へ保存したあと、sample/index.htmlをブラウザで開くと動作を確認できます。左右のボタンをクリックするとカードを1枚ずつ切り替えて表示できます。

カスタマイズできる内容
index.htmlではカードの見出しや説明文、カード枚数を変更できます。style.cssではスライダー全体の横幅、カードサイズ、背景色、文字色、余白、角丸、ボタンの色や大きさを調整できます。script.jsではスライド枚数や切り替え処理を変更できます。

数値調整
style.css
max-width:760px;
スライダー全体の最大横幅です。値を大きくすると全体が広くなり、小さくするとコンパクトになります。

padding:32px;
スライダー全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。

border-radius:18px;
カードの角丸です。値を大きくすると丸みが強くなり、小さくすると四角いデザインになります。

width:52px;
左右ボタンの大きさです。値を変更するとボタンサイズが変わります。

transition:transform .3s ease;
スライドの切り替え時間です。0.3秒で移動します。値を大きくするとゆっくり、小さくすると速く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより画面幅に合わせてスライダー全体が自動調整されます。また、media queryでスマートフォン表示時の余白やボタンサイズを調整しているため、スマートフォン・タブレット・PCでも利用できます。

こちらもおすすめ

スライダー
スライダーのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント