swiper 슬라이더의 관한 질문
본문
swiper 슬라이드의 마지막 부분으로 왔을때만 HTML 화면에 버튼이 생성되게 하는 방법이없을까요?
마지막 부분에만 생기게요
예로들면 1부터 3까지의 슬라이드 페이지가 있다면 1번 2번은 그냥 이미지라던지 텍스트라면 3번으로 왔을때 이미지 텍스트 그리고 버튼이 추가로 생성이 될수 있게요
답변 2
swiper 슬라이드에서 지원되는 함수로 처리 가능합니다.
슬라이드 전환효과 전에 처리하실려면
beforeSlideChangeStart나 beforeTransitionStart 이벤트를,
전환효과 후에 처리하실거면
slideChangeTransitionEnd 이벤트를 활용해서
전체 슬라이드 수를 카운트하고 현재 인덱스가 마지막 슬라이드라면 이미티, 텍스트, 버튼을
보여주게끔 처리하시면 됩니다.
swiper의 on event에 함수등록.
함수내용 ->
슬라이드 길이 (swiper.slide.length)
활성화 슬라이드 넘버 (swiper.activeIndex)
슬라이드 길이와 활성화 슬라이드 넘버+1 이 같으면 마지막 슬라이드임.
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide Last</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false
},
on: {
slideChangeTransitionEnd() {
var isLastSlide = swiper.slides.length === (swiper.activeIndex + 1 ); // 마지막 슬라이드인지 체크
if(isLastSlide){ // 마지막 슬라이드면
console.log("is Last Slide.");
// html 추가하는 코드 작성
}
}
},
});
</script>
답변을 작성하시기 전에 로그인 해주세요.