반응형
JS 라이브러리인 스와이퍼(Swiper)의 슬라이드 넘기기 자동재생(Autoplay) 시 마지막 슬라이드에서 다시 처음 슬라이드로 넘겨지지 않고 멈추는 옵션에 대해 알아본다.
스와이퍼(Swiper)의 API에서 자동재생(Autoplay)에 관한 파라미터가 여러 가지 나오는데 그중에 stopOnLastSlide 옵션을 사용하여 Swiper의 자동재생을 반복할 것인지 한 번만 재생하고 멈출 것인지에 대한 설정을 할 수가 있다.
| 자동실행 매개변수 | 타입 | 기본 설정값 | 설명 |
| stopOnLastSlide | boolean | false | 이 옵션을 활성화(true)로 하면 마지막 슬라이드에 도달할시 자동재생이 중지된다. (반복 모드에서는 효과가 없음). |
아래 예제는 스프링 컨트롤러에서 자동재생과 한번만 실행에 대한 설정을 Y/N으로 Model에 저장하고 View단에서 Model에서 설정한 값에 따라 슬라이드가 실행되는 간단한 로직이다.
View (main.jsp) 설정
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Spring Boot App</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<style>
body {
position: relative;
height: 100%;
text-align: -webkit-center;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-wrapper img {
display: block;
width: 50%;
height: 50vh;
object-fit: cover;
text-align: -webkit-center;
}
.swiper-pagination-bullet {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: #fff;
opacity: 1;
background: rgba(0, 0, 0, 0.2);
}
.swiper-pagination-bullet-active {
color: #fff;
background: #007aff;
}
</style>
<body>
<input type="hidden" id="autoPlayYn" value="${autoPlayYn}">
<input type="hidden" id="loopYn" value="${loopYn}">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://images.pexels.com/photos/19495579/pexels-photo-19495579.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"></div>
<div class="swiper-slide"><img src="https://images.pexels.com/photos/17902478/pexels-photo-17902478.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"></div>
<div class="swiper-slide"><img src="https://images.pexels.com/photos/8105132/pexels-photo-8105132.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"></div>
</div>
<div class="swiper-pagination"></div>
</div>
<script>
var SlideSwiper = () => {
const shouldAutoplay = document.getElementById('autoPlayYn').value === 'Y';
const shouldLoop = document.getElementById('loopYn').value === 'Y';
const initialAutoplaySettings = {
delay: 3000,
stopOnLastSlide: !shouldLoop, //자동재생시 반복재생/한번재생 설정
disableOnInteraction: false,
};
const Slide = new Swiper(".mySwiper", {
slidesPerView: "auto",
spaceBetween: 0,
effect: 'fade',
speed : 1000,
autoplay: shouldAutoplay ? initialAutoplaySettings : false, //자동재생 여부설정
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
});
};
SlideSwiper();
</script>
</body>
</html>◆ 슬라이드 자동실행 한번만 (Autoplay: true, stopOnLastSlide: true)
컨트롤러(Controller) 설정
@Controller
public class MainController {
@GetMapping("/main")
public String main(Model model) {
model.addAttribute("autoPlayYn", "Y"); //자동재생:On
model.addAttribute("loopYn", "N"); //한번만재생:On
return "/main";
}
}
◆ 슬라이드 자동실행 반복 (Autoplay: true, stopOnLastSlide: false)
컨트롤러(Controller) 설정
@Controller
public class MainController {
@GetMapping("/main")
public String main(Model model) {
model.addAttribute("autoPlayYn", "Y"); //자동재생:On
model.addAttribute("loopYn", "Y"); //한번만재생:Off
return "/main";
}
}
참조
Swiper API
https://swiperjs.com/swiper-api#autoplay
글 내용 중 잘못된 부분이 있거나, 첨부하실 내용이 있으시면 댓글로 남겨주세요. 공부하는데 많은 도움이 됩니다.
-- 기억의 유효기간은 생각보다 짧다. --
반응형
'UI 도구 > 스와이퍼 (Swiper)' 카테고리의 다른 글
| [Swiper]_슬라이드 전환시 페이드(fade) 효과 없애기 (0) | 2024.12.05 |
|---|