프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[SCRIPT] Swiper Slide#4 slideChange 이벤트

2022.12.09
북마크 작성자 정보

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>
 

이 포스트 공유하기

전체목록