슬라이드 관련 질문 드립니다!

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
슬라이드 관련 질문 드립니다!

QA

슬라이드 관련 질문 드립니다!

답변 1

본문

현재 swiper로 슬라이드를 만든 상황인데,
클라이언트가 요구하길


1. 왼쪽 방향 드래그, 오른쪽 방향 드래그시 모두 다음 슬라이드로 이동하며

2. 이전 슬라이드의 이동은 특정 버튼을 통해서만 가능

 

찾아보니 swiper 옵션으로 이전 슬라이드로의 이동을 막으면 버튼을 통한 이동도 막히는 것 같더라구요,,

 

혹시 위 형태의 동작이 제어 가능한 슬라이드 플러그인을 아시거나,
방법을 아시는 분 조언 부탁드립니다,,

아니면 스크립트로 제어하는 슬라이드로 만들어야하게 생겼네요,, ㅠㅠ

이 질문에 댓글 쓰기 :

답변 1

구체적으로 코드가 어떻게 되어있는지 알 수 없지만

다음과 같은 방법으로 가능할 것 같습니다. 참고하셔서 원하시는 형식으로 구현하시면 될 것 같습니다.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swiper Control</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <style>
    .swiper-container {
      width: 100%;
      height: 300px;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
<div class="swiper-container">
  <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>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Navigation buttons -->
  <div class="swiper-button-prev">Prev</div>
  <div class="swiper-button-next">Next</div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
  var swiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: true,
    // Disable touch dragging
    allowTouchMove: false,
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
  // Add event listener for custom prev button
  document.querySelector('.swiper-button-prev').addEventListener('click', function() {
    swiper.slidePrev();
  });
</script>
</body>
</html>

위와 같이 하면 왼쪽 방향 드래그와 오른쪽 방향 드래그를 모두 비활성화하고, 이전 슬라이드로 이동하는 버튼을 클릭할 때만 이전 슬라이드로 이동하게 할 수 있습니다.

비활성화 하는대신 스와이퍼를 초기화 하는 형식으로 할 수 있습니다.
다음을 참고하셔서 원하시는 형식으로 수정 하시면 가능 하지 않을까 합니다.



  <style>
    .swiper-container {
      width: 100%;
      height: 300px;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>


<div class="swiper-container">
  <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>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Navigation buttons -->
  <div class="swiper-button-prev">Prev</div>
  <div class="swiper-button-next">Next</div>
</div>

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script>
  var swiper = new Swiper('.swiper-container', {

    direction: 'horizontal',
    loop: true,

    pagination: {
      el: '.swiper-pagination',
    },

    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });


  document.querySelector('.swiper-button-prev').addEventListener('click', function() {
    swiper.slidePrev();
  });
</script>

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