[SCRIPT] Swiper Slide#4 slideChange 이벤트
2022.12.09
북마크 작성자 정보
작성일/수정일
2022-12-09 11:18:45 / 2022-12-09 11:18:45
slideChange 이벤트
- 슬라이드 변경 이벤트 감지
- 슬라이드가 변경 될면 팝업 또는 다른 영역 텍스트, 이미지 변경.
- https://swiperjs.com/swiper-api#eventsz
html
<div class="visual_area">
<div class="visual_slide" id="visual_slide">
<div class="swiper-wrapper">
<div class="swiper-slide" data-idx="0">
<div class="banner_wrap box-image"><img src="s1.jpg" width="100%" alt=""></div>
</div>
<div class="swiper-slide" data-idx="1">
<div class="banner_wrap box-image"><img src="s2.jpg" width="100%" alt=""></div>
</div>
<div class="swiper-slide" data-idx="2">
<div class="banner_wrap box-image"><img src="s3.jpg" width="100%" alt=""></div>
</div>
</div>
<div class="arrow-wrap">
<div class="btn-arrow btn-prev" aria-label="Previous slide"></div>
<div class="btn-arrow btn-next" aria-label="Next slide"></div>
</div>
<div class="pagination"></div>
</div>
</div>
*script
<script>
var keyvisual = new Swiper('#visual_slide',{
autoplay: { delay: 5000, disableOnInteraction: false },
slidesPerView : 1,
spaceBetween : 0,
loopAdditionalSlides : 1,
speed: 400,
loop: true,
effect: 'slide',
navigation: {
nextEl: '#visual_slide > .arrow-wrap > .btn-next',
prevEl: '#visual_slide > .arrow-wrap > .btn-prev',
},
pagination: {
el: "#visual_slide .pagination",
clickable: true,
},
on: {
slideChangeTransitionEnd: function(){
let Idx = this.realIndex;
let data_idx = $('#visual_slide .swiper-slide.swiper-slide-active').data('idx');
}
}
});
</script>