お客様の声スライダー Web サイトを構築する-CSSチュートリアル-php.cn

お客様の声スライダー Web サイトを構築する

PHPz

リリース： 2024-08-24 06:43:07

オリジナル

560 人が閲覧しました

Build a Testimonials Slider Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクトであるお客様の声スライダーをご紹介できることを嬉しく思います。このプロジェクトは、JavaScript を使用してインタラクティブで動的な Web コンポーネントを作成するスキルを向上させる優れた方法です。始めたばかりの場合でも、ポートフォリオに新しい機能を追加しようとしている場合でも、このお客様の声スライダープロジェクトは、フロントエンド開発をさらに深く掘り下げる素晴らしい機会を提供します。

プロジェクト概要

お客様の声スライダー は、ユーザーが「次へ」ボタンと「前へ」ボタンを使用してさまざまなお客様の声をナビゲートできる Web ベースのアプリケーションです。このプロジェクトでは、インタラクティブなユーザーインターフェイスを作成し、JavaScript で状態を管理し、スムーズな移行を通じてユーザーエクスペリエンスを向上させる方法を紹介します。

特徴

インタラクティブなお客様の声: ユーザーは、ナビゲーションボタンを使用して複数のお客様の声をナビゲートできます。
スムーズな移行: スムーズな移行でお客様の声が変化し、より良いユーザーエクスペリエンスを提供します。
レスポンシブデザイン: さまざまなデバイス間で一貫した視覚的に魅力的なエクスペリエンスを保証します。

使用されている技術

HTML: Web ページと紹介要素を構造化します。
CSS: ユーザーインターフェイスのスタイルを設定し、クリーンで応答性の高いデザインを保証します。
JavaScript: お客様の声のナビゲーションとユーザーインタラクションのロジックを管理します。

プロジェクトの構造

プロジェクトの構造を簡単に見てみましょう:

Testimonials-Slider/
├── index.html
├── style.css
└── script.js

ログイン後にコピー

index.html: お客様の声スライダーの HTML 構造が含まれています。
style.css: アプリケーションの外観と応答性を向上させる CSS スタイルが含まれています。
script.js: お客様の声のナビゲーションロジックとユーザーインタラクションを管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

リポジトリのクローンを作成します:
```
git clone https://github.com/abhishekgurjar-in/Testimonials-Slider.git
```
ログイン後にコピー
プロジェクトディレクトリを開きます:
```
cd Testimonials-Slider
```
ログイン後にコピー
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、お客様の声スライダーの使用を開始します。

使用法

Web ブラウザで Web サイトを開きます。
お客様の声を表示するには、[次へ] または [前へ] ボタンをクリックして、さまざまなお客様の声を参照してください。
お客様の声を読み進めながら、スムーズな移行をお楽しみください。

コードの説明

HTML

index.html ファイルは、お客様の声のコンテンツやナビゲーションボタンなど、お客様の声スライダーの基本構造を提供します。スニペットは次のとおりです:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Testimonials Slider</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <div class="box-1" id="testimonial-1">
        <div class="text">
          <h1>
            “ If you want to lay the best foundation possible I’d recommend
            taking this course. The depth the instructors go into is incredible.
            I now feel so confident about starting up as a professional
            developer. ”
          </h1>
          <div class="name">
            <h3>John Tarkpor</h3>
            <h4>Junior Front-end Developer</h4>
          </div>
        </div>
        <div class="image">
          <img src="./images/image-john.jpg" alt="John's Testimonial" />
          <div class="button">
            <img src="./images/icon-prev.svg" id="prev-1" alt="お客様の声スライダー Web サイトを構築する" />
            <img src="./images/icon-next.svg" id="next-1" alt="Next" />
          </div>
        </div>
      </div>
      <!-- Additional testimonials here -->
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

ログイン後にコピー

CSS

style.css ファイルは、お客様の声スライダーのスタイルを設定し、モダンで使いやすいレイアウトを提供します。以下にいくつかの主要なスタイルを示します:

* {
  box-sizing: border-box;
}

body {
  font-family: Inter, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 90vh;
  background: url(./images/pattern-curve.svg) no-repeat fixed left bottom;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-1 {
  width: 70%;
  height: 70%;
  background-color: transparent;
  display: none; /* Hide all testimonials initially */
}

#testimonial-1 {
  display: flex; /* Display the first testimonial */
}

/* Additional styles */

ログイン後にコピー

JavaScript

script.js ファイルは、お客様の声をナビゲートし、ユーザーインタラクションを処理するためのロジックを管理します。スニペットは次のとおりです:

document.addEventListener("DOMContentLoaded", function () {
  const testimonials = document.querySelectorAll(".box-1");
  let currentIndex = 0;

  const showTestimonial = (index) => {
    testimonials.forEach((testimonial, i) => {
      testimonial.style.display = i === index ? "flex" : "none";
    });
  };

  document.getElementById("next-1").addEventListener("click", () => {
    currentIndex = (currentIndex + 1) % testimonials.length;
    showTestimonial(currentIndex);
  });

  document.getElementById("prev-1").addEventListener("click", () => {
    currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
    showTestimonial(currentIndex);
  });

  // Additional JavaScript logic
});

ログイン後にコピー

ライブデモ

ここでお客様の声スライダーのライブデモをチェックできます。

結論

このお客様の声スライダーの構築は、JavaScript と動的でインタラクティブな Web コンポーネントの作成方法についての理解を深めた魅力的な経験でした。このプロジェクトが、あなたが JavaScript をさらに探索し、Web 開発スキルを向上させるきっかけとなることを願っています。コーディングを楽しんでください!