建立一個推薦滑桿網站-css教學-PHP中文網

建立一個推薦滑桿網站

PHPz

發布： 2024-08-24 06:43:07

原創

459 人瀏覽過

Build a Testimonials Slider Website

介紹

各位開發者大家好！我很高興展示我的最新項目：推薦滑桿。該專案是增強您使用 JavaScript 建立互動式動態 Web 元件的技能的好方法。無論您是剛起步還是希望為您的產品組合添加新功能，此推薦滑桿專案都提供了深入研究前端開發的絕佳機會。

項目概況

推薦滑桿是一個基於網絡的應用程序，允許用戶使用下一個和上一個按鈕瀏覽各種推薦。此專案展示如何建立互動式使用者介面、使用 JavaScript 管理狀態以及透過平滑過渡增強使用者體驗。

特徵

互動式推薦：使用者可以使用導航按鈕瀏覽多個推薦。
平滑過渡：評估隨平滑過渡而變化，提供更好的使用者體驗。
響應式設計：確保在不同裝置上獲得一致且具有視覺吸引力的體驗。

使用的技術

HTML：建立網頁和推薦元素。
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
```
登入後複製
運行項目:
- 在網頁瀏覽器中開啟index.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="建立一個推薦滑桿網站" />
            <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
});

登入後複製