패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 이미지를 가로로 슬라이딩하는 방법과 슬라이딩 페이지 관련 요소를 삽입하는 방법을 배웠다

HTML

• swiper-pagination: 슬라이드에서 페이지 번호 나타내는 요소의 class명
• swiper-pagination 안에 swiper-prev, swiper-next를 작성하여 페이지 번호, 앞/뒤로 슬라이드 움직이게 하는 버튼 등을 제어할 수 있음

<div class="swiper-pagination"></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>

JS

• new Swiper('.promotion .swiper-container', {
  1. slidesPerView: 3, > 한번에 보여줄 슬라이드의 개수 3개
  2. spaceBetween: 10, > 슬라이드 사이 여백 10
  3. centeredSlides: true, > 1번 슬라이드 가운데 보이기
  4. pagination: { el... > 페이지 번호를 제어하겠다는 의미
  5. pagination: { clickable: true > 클릭이 가능하도록 하겠다는 의미(사용자가 제어 가능하도록)
  6. navigaion이라는 옵션 : prevEl(이전버튼), nextEl(다음버튼)

  new Swiper('.promotion .swiper-container', {
    slidesPerView: 3, 
    spaceBetween: 10, 
    centeredSlides: true, 
    loop: true,
    autoplay: {
        delay: 5000 
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    navigation: {
        prevEl: '.swiper-prev', 
        nextEl: '.swiper-next'
    }
    

CSS

• 라이브러리가 어떤 선택자를 사용했는지 알기 위해 개발자도구를 통해 제어하고 싶은 요소의 class명을(.swiper-pagination-bullet) 확인하고 선택
• background-color: transparent; > 배경색 투명(사용 안 함)
• .notice .promotion .swiper-pagination .swiper-pagination-bullet:last-child : 가장 마지막 동그라미의 오른쪽 여백은 필요없기 때문에 여백 0으로 지정
  -.notice .promotion .swiper-pagination .swiper-pagination-bullet-active : 활성화된 그 페이지 번호 선택자 개발자도구 통해서 확인
• .notice .promotion .swiper-prev, .notice .promotion .swiper-next : style 적용 내용이 동일해서 다중선택자 방식으로 작성

.notice .promotion .swiper-pagination {
    bottom: 40px;
    left: 0;
    right: 0;
}


.notice .promotion .swiper-pagination .swiper-pagination-bullet{
    background-color: transparent; 
    background-image: url("../images/promotion_slide_pager_on.png");
    width: 12px;
    height: 12px;
    margin-right: 6px;
    outline: none;
}

.notice .promotion .swiper-pagination .swiper-pagination-bullet:last-child{
    margin-right: 0px;
}

.notice .promotion .swiper-pagination .swiper-pagination-bullet-active{
    background-image: url("../images/promotion_slide_pager_on.png");
}

/* 다중선택자 방식으로 작성 */
.notice .promotion .swiper-prev,
.notice .promotion .swiper-next{
    width: 42px;
    height: 42px;
    border: 2px solid #333;
    border-radius: 50%;
    position: absolute;
    top: 300px;
    z-index: 1;
    cursor: pointer;
    outline: none;
    /* 아이콘 가운데 정렬 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .4s;
}

.notice .promotion .swiper-prev{
    left: 50%;
    margin-left: -480px;
}

.notice .promotion .swiper-next{
    right: 50%;
    margin-right: -480px;
}

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