Day6 : 스타벅스 웹사이트 만들기 / 다중 요소 슬라이드

 

HTML/CSS/JS로 스타벅스 웹사이트 만들기

 

개요

 

프로젝트명 : HTML/CSS/JS로 스타벅스 웹사이트 만들기

강의 : 패스트캠퍼스 프론트엔드

분류 : 클론코딩

주요 강의 내용

- html : basic html + font, favicon

- css : basic css, 가상 클래스, bem

- js : basic js, swiper(슬라이드), toggle, gsap.to(순차적 애니메이션), Youtube iframe APII 등

사용 툴 : HTML, CSS, JavaScript

 

패스트캠퍼스 강의를 정리한 내용으로, 개인공부 후 기록하기 위한 목적임으로 내용 상에 오류가 있을 수 있습니다.

 

---

DAY 6
: 다중 요소 슬라이드

 

다중 요소 슬라이드

* view

하단 버튼을 누르면 사진이 감기면서 다음 사진으로 넘어가는 슬라이드를 만들었다.
슬라이드는 챌린지 하기 전에 이미 해봤던 거라 비교적 간단하게 구현할 수 있었다.

---

* html code

    <!-- Awards -->
    <section class="awards">
      <div class="inner">
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="./images/awards_slide1.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/awards_slide2.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/awards_slide3.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/awards_slide4.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/awards_slide5.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/awards_slide6.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/awards_slide7.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/awards_slide8.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/awards_slide9.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/awards_slide10.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/awards_slide1.jpg" alt="" />
            </div>
          </div>
        </div>
        <div class="swiper-prev">
          <div class="material-icons">arrow_back</div>
        </div>
        <div class="swiper-next">
          <div class="material-icons">arrow_forward</div>
        </div>
      </div>
    </section>

 

슬라이드를 만드는 구조는 여러가지가 있는데, 그 중에서 왼쪽과 오른쪽에 슬라이드를 넘길 수 있는 버튼을 구현하는 Navigation 구조로 만드는 걸 원했다.

 

그래서 하단에 class 속성으로 swiper-prev, swiper-next 인 div tag 두 개를 선택하고, 그 안에 역시 마찬가지로 이전에 배웠던 material-icons를 작성해 아이콘이 추가될 수 있도록 만들었다.

---

* css code

/* AWARDS */
.awards {
    background-color: #272727;
}

.awards .inner {
    padding: 40px 0;
}

.awards .swiper {
    width: 100%;
    height: 40px;
}

.awards .swiper-prev,
.awards .swiper-next {
    width: 42px;
    height: 42px;
    border: 2px solid #fff;
    border-radius: 50%;
    outline: none;
    color: #fff;
    opacity: .3;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 가운데 배치 */
    position: absolute;
    top:0;
    bottom: 0;
    margin: auto;
}
.awards .swiper-prev {
    left: -100px;
}

.awards .swiper-next {
    right: -100px;
}

.awards .swiper-prev:hover,
.awards .swiper-next:hover {
    background-color: #fff;
    color: #333;
}

 

css도 컬러 수정, 가운데 정렬, 아이콘 조절 정도만 추가해줬다.

---

* js code

// AWARDS -> Swiper
new Swiper('.awards .swiper', {
    direction: 'horizontal',
    autoplay: true,
    loop: true,
    spaceBetween: 30,
    slidesPerView: 5, // 한 페이지당 보려고 하는 슬라이드 개수
    navigation : {
        prevEl : '.awards .swiper-prev', // 이전슬라이드 보는 버튼
        nextEl : '.awards .swiper-next' // 다음슬라이드 보는 버튼
    }
});

 

간단한 설명은 주석으로 처리했다.

추가로 알아본 Swiper 자료 :)

 

---

 

* 참조자료

[js] Swiper 슬라이더 사용법 (왕초보를 위한 홈페이지 대문에 슬라이드 넣기)

Swiper - The Most Modern Mobile Touch Slider