建立一個推薦滑桿網站

介紹

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

項目概況

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

特徵

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

使用的技術

• HTML：建立網頁和推薦元素。
• CSS：設定使用者介面的樣式，確保簡潔且回應靈敏的設計。
• JavaScript：管理推薦導航和使用者互動的邏輯。

專案結構

以下是專案結構的快速瀏覽：

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

• index.html：包含建議滑桿的 HTML 結構。
• style.css：包含 CSS 樣式以增強應用程式的外觀和回應能力。
• script.js：管理推薦導航邏輯和使用者互動。

安裝

要開始該項目，請按照以下步驟操作：

1. 複製儲存庫：
   

   git clone https://github.com/abhishekgurjar-in/Testimonials-Slider.git
   

2. 開啟專案目錄:
   

   cd Testimonials-Slider
   

3. 運行項目:

   • 在網頁瀏覽器中開啟index.html 檔案以開始使用推薦滑桿。

用法

1. 在網頁瀏覽器中開啟網站。
2. 查看推薦透過點擊「下一個」或「上一個」按鈕瀏覽不同的推薦。
3. 在瀏覽推薦時享受平穩的過渡。

程式碼說明

超文本標記語言

index.html 檔案提供了推薦滑桿的基本結構，包括推薦內容和導航按鈕。這是一個片段：

  
    <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>
  
  
    <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>
  

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 開發技能。快樂編碼！

製作人員

這個專案是我在 Web 開發方面持續學習之旅的一部分，專注於創建互動式使用者介面。

作者

• 阿布舍克·古賈爾
  • GitHub 簡介

以上是建立一個推薦滑桿網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！