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

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

QA

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

본문

안녕하세요.

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

답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT