スライドウィンドウの実装

Swiper

swiperjs.com
:JavaScriptライブラリ

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

:リンクを使用します.

<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

:例のようにクラスを設定して使用できます.
クラスを設定すると、
jsで動作します.

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

いろいろな選択肢があり、使いやすいです.

calc()

calc(819px * 3 + 20px);
:cssでは計算が必要な入力を容易に行うことができます.

画面を小さくしたり大きくしたりするときは中央

position: absolute;
left: 50%;
margin-left: calc(요소 가로 크기 px/-2);

swiperオプションの使用

new Swiper('.promotion .swiper-container', {
  // direction: 'horizontal', // 수평 슬라이드
  autoplay: { // 자동 재생 여부
    delay: 5000 // 5초마다 슬라이드 바뀜
  },
  loop: true, // 반복 재생 여부
  slidesPerView: 3, // 한 번에 보여줄 슬라이드 개수
  spaceBetween: 10, // 슬라이드 사이 여백
  centeredSlides: true, // 1번 슬라이드가 가운데 보이기
  pagination: { // 페이지 번호 사용 여부
    el: '.promotion .swiper-pagination', // 페이지 번호 요소 선택자
    clickable: true // 사용자의 페이지 번호 요소 제어 가능 여부
  },
  navigation: { // 슬라이드 이전/다음 버튼 사용 여부
    prevEl: '.promotion .swiper-prev', // 이전 버튼 선택자
    nextEl: '.promotion .swiper-next' // 다음 버튼 선택자
  }
})

autoplay: { delay: 5000 } => 객체로 넣어서 설정하기 loop: true => 처음과 끝부분이 비어있지 않고 반복하여 재생하도록 함 centeredSlides: true => 1번 슬라이드가 가운데 보이고 가운데 슬라이드에 -active 클래스 부여 pagination: { el: '.promotion .swiper-pagination', clickable: true }:クラスを作成して設定すると、機能します.

css設定

swiper-スライドに透明度を付与します.2
不透明1にswiper-slide-activeを付与し、アクティブにすると鮮明に表示されます.
ページングには、設定されたcss値があります.絶対的なので、再配置する必要があります.
アウトラインは選択時に表示されません.
outline: none;
あなたに作ってあげます.
以降に必要なページング、prev、nextの外観を設定します.

flexクリーンアップ

display: flex;