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

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

QA

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

답변 1

본문

안녕하세요.

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

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

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

238580039_1726056471.7391.png

 

 

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

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


<!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>

 

부탁드립니다.!!

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 75
© SIRSOFT
현재 페이지 제일 처음으로