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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
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

옵션중에 한번에 이동하는 슬라이더 갯수가 있습니다.

slidesPerGroup: 2,

https://ktsmemo.cafe24.com/s/SwiperJS/367

참고하셔서 수정하세요.

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