사용후기 슬라이더 웹사이트 구축-CSS 튜토리얼-php.cn

John Tarkpor

Junior Front-end Developer

집

웹 프론트엔드

CSS 튜토리얼

사용후기 슬라이더 웹사이트 구축

PHPz

Aug 24, 2024 am 06:43 AM

Build a Testimonials Slider Website

소개

안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 평가 슬라이더를 선보이게 되어 기쁩니다. 이 프로젝트는 JavaScript를 사용하여 대화형 및 동적 웹 구성 요소를 만드는 기술을 향상시킬 수 있는 좋은 방법입니다. 이제 막 시작했거나 포트폴리오에 새로운 기능을 추가하려는 경우, 이 추천서 슬라이더 프로젝트는 프런트엔드 개발에 대해 더 깊이 알아볼 수 있는 훌륭한 기회를 제공합니다.

프로젝트 개요

평가 슬라이더는 사용자가 다음 및 이전 버튼을 사용하여 다양한 평가를 탐색할 수 있는 웹 기반 애플리케이션입니다. 이 프로젝트는 대화형 사용자 인터페이스를 만들고, 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 파일을 엽니다.

용법

웹사이트를 엽니다 웹 브라우저에서
추천을 보려면 "다음" 또는 "이전" 버튼을 클릭하여 다양한 추천을 탐색하세요.
부드러운 전환을 통해 사용후기를 살펴보세요.

코드 설명

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 id="John-Tarkpor">John Tarkpor</h3>
            <h4 id="Junior-Front-end-Developer">Junior Front-end Developer</h4>
          </div>
        </div>
        <div class="image">
          <img src="/static/imghw/default1.png"  data-src="./images/image-john.jpg"  class="lazy" alt="John's Testimonial" />
          <div class="button">
            <img src="/static/imghw/default1.png"  data-src="./images/icon-prev.svg"  class="lazy" id="prev-1" alt="사용후기 슬라이더 웹사이트 구축" />
            <img src="/static/imghw/default1.png"  data-src="./images/icon-next.svg"  class="lazy" 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 */

로그인 후 복사

자바스크립트

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에 대한 이해와 동적인 대화형 웹 구성 요소를 만드는 방법을 깊게 해주는 매력적인 경험이었습니다. 이 프로젝트를 통해 여러분이 JavaScript를 더 많이 탐색하고 웹 개발 기술을 향상할 수 있기를 바랍니다. 즐거운 코딩하세요!