메가박스 사이트 따라 만들기 - 영화 차트 슬라이더

megabox10

영화 차트 이미지 슬라이드

6초가 지날 때마다 슬라이드가 죄측으로 움직이도록 설정합니다. (https://swiperjs.com/)에서 원하는 슬라이더 소스를 가져와서 사용합니다. * 구조를 잘 잡아야함

 

결과

HTML

<div class="swiper-container2">
  <div class="chart_cont1 swiper-wrapper">
    <div class="swiper-slide">
      <div class="poster">
        <figure>
          <img src="assets/img/poster01.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="1번 포스터 이미지입니다.">
        </figure>
        <div class="rank"><strong>1</strong></div>
        <div class="mx">
          <span class="icon m ir_pm">MX</span>
          <span class="icon b ir_pm">Boutique</span>
        </div>
      </div>
      <div class="infor">
        <h3><span class="icon all ir_pm">전체관람가</span> <strong>침묵</strong></h3>
        <div class="infor_btn">
          <a href="#">상세보기</a>
          <a href="#">예매하기</a>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="poster">
        <figure>
          <img src="assets/img/poster02.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="2번 포스터 이미지입니다.">
        </figure>
        <div class="rank"><strong>2</strong></div>
        <div class="mx">
          <span class="icon m ir_pm">MX</span>
          <span class="icon b ir_pm">Boutique</span>
        </div>
      </div>
      <div class="infor">
        <h3><span class="icon a12 ir_pm">12세</span> <strong>침묵</strong></h3>
        <div class="infor_btn">
          <a href="#">상세보기</a>
          <a href="#">예매하기</a>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="poster">
        <figure>
          <img src="assets/img/poster03.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="3번 포스터 이미지입니다.">
        </figure>
        <div class="rank"><strong>3</strong></div>
        <div class="mx">
          <span class="icon m ir_pm">MX</span>
          <span class="icon b ir_pm">Boutique</span>
        </div>
      </div>
      <div class="infor">
        <h3><span class="icon a15 ir_pm">15세</span> <strong>침묵</strong></h3>
        <div class="infor_btn">
          <a href="#">상세보기</a>
          <a href="#">예매하기</a>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="poster">
        <figure>
          <img src="assets/img/poster04.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="4번 포스터 이미지입니다.">
        </figure>
        <div class="rank"><strong>4</strong></div>
        <div class="mx">
          <span class="icon m ir_pm">MX</span>
          <span class="icon b ir_pm">Boutique</span>
        </div>
      </div>
      <div class="infor">
        <h3><span class="icon a19 ir_pm">19세</span> <strong>침묵</strong></h3>
        <div class="infor_btn">
          <a href="#">상세보기</a>
          <a href="#">예매하기</a>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="poster">
        <figure>
          <img src="assets/img/poster04.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="4번 포스터 이미지입니다.">
        </figure>
        <div class="rank"><strong>4</strong></div>
        <div class="mx">
          <span class="icon m ir_pm">MX</span>
          <span class="icon b ir_pm">Boutique</span>
        </div>
      </div>
      <div class="infor">
        <h3><span class="icon a19 ir_pm">19세</span> <strong>침묵</strong></h3>
        <div class="infor_btn">
          <a href="#">상세보기</a>
          <a href="#">예매하기</a>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="poster">
        <figure>
          <img src="assets/img/poster04.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="4번 포스터 이미지입니다.">
        </figure>
        <div class="rank"><strong>4</strong></div>
        <div class="mx">
          <span class="icon m ir_pm">MX</span>
          <span class="icon b ir_pm">Boutique</span>
        </div>
      </div>
      <div class="infor">
        <h3><span class="icon a19 ir_pm">19세</span> <strong>침묵</strong></h3>
        <div class="infor_btn">
          <a href="#">상세보기</a>
          <a href="#">예매하기</a>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="poster">
        <figure>
          <img src="assets/img/poster04.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="4번 포스터 이미지입니다.">
        </figure>
        <div class="rank"><strong>4</strong></div>
        <div class="mx">
          <span class="icon m ir_pm">MX</span>
          <span class="icon b ir_pm">Boutique</span>
        </div>
      </div>
      <div class="infor">
        <h3><span class="icon a19 ir_pm">19세</span> <strong>침묵</strong></h3>
        <div class="infor_btn">
          <a href="#">상세보기</a>
          <a href="#">예매하기</a>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="poster">
        <figure>
          <img src="assets/img/poster04.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="4번 포스터 이미지입니다.">
        </figure>
        <div class="rank"><strong>4</strong></div>
        <div class="mx">
          <span class="icon m ir_pm">MX</span>
          <span class="icon b ir_pm">Boutique</span>
        </div>
      </div>
      <div class="infor">
        <h3><span class="icon a19 ir_pm">19세</span> <strong>침묵</strong></h3>
        <div class="infor_btn">
          <a href="#">상세보기</a>
          <a href="#">예매하기</a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- //chart_cont1 -->

이하 3개의 컨텐츠에도 동일하게 넣어줍니다.

 

js

//영화차트 이미지 슬라이드
var swiper = new Swiper(".swiper-container2", {
  slidesPerView: 4,
  spaceBetween: 24,
  // mousewheel: {
  //     invert: true,
  // },
  keyboard: {
    enabled: true,
    onlyInViewport: false,
  },
  autoplay: {
    delay: 6000,
  },
});

 

출력

←(좌측)으로 이동함