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

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

아녕하세오 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2024.09.11 21:26:03 1110 (14.♡.♡.71)

답변 1

본문

안녕하세요.

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

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

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

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

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


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

부탁드립니다.!!