Swiper js 스와이퍼 보이는 슬라이드 영역 정렬 문의드립니다.

안녕하세요.

Swiper cdn을 사용해서 스와이퍼를 제작던 중 해당 디자인처럼 구현이 되지않아 문의드립니다.

제가 생각하는 슬라이드의 형태는 액티브되는 슬라이드와 그 다음에 보여지는 슬라이드가 같이 중앙의 1400px의 영역에 보이고 1400px 영역을 중심으로 돌아가는 형태를 생각했습니다.

(스와이퍼의 전체의 영역은 100%)

238580039_1726056471.7391.png

그런데 현재 구현되는 슬라이드의 형태는 아래의 형태입니다. 238580039_1726056679.9048.jpg

현재의 소스 코드는 아래의 내용입니다.

Copy

<!DOCTYPE html>

<html lang="ko">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

 

  <!-- RESET CSS -->

  <link href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css" rel="stylesheet" />

 

  <style>

    .promotion .swiper{

 

    }

    .promotion .swiper .swiper-wrapper{

      width: 1400px;

      margin: 0 auto;

      background-color: yellow;

    }

    .promotion .swiper .swiper-wrapper .swiper-slide{

      width: 699px;

      height: 644px;

      background-color:pink;

      opacity: .8;

    }

  </style>

</head>

<body>

  <section class="promotion">

    <div class="swiper">

      <div class="swiper-wrapper">

        <div class="swiper-slide">Slide 1</div>

        <div class="swiper-slide">Slide 2</div>

        <div class="swiper-slide">Slide 3</div>

        <div class="swiper-slide">Slide 4</div>

        <div class="swiper-slide">Slide 5</div>

        <div class="swiper-slide">Slide 6</div>

        <div class="swiper-slide">Slide 7</div>

        <div class="swiper-slide">Slide 8</div>

        <div class="swiper-slide">Slide 9</div>

      </div>

    </div>

  </section>

 

    <!-- SWIPER -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

 

    <script>

      new Swiper ('.promotion .swiper', {

      spaceBetween:1,

      slidesPerView:'auto',

      loop:true,

      });

    </script>

</body>

</html>

부탁드립니다.!!

Swiper js 스와이퍼 보이는 슬라이드 영역 정렬 문의드립니다.

답변 1개

공유하기