슬라이드 관련 질문 드립니다!
본문
현재 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>
ㅠㅠ 조금 더 공부해보도록 하겠습니다 감사합니다!
답변을 작성하시기 전에 로그인 해주세요.