마지막에 회전 목마 사진이 다른 이벤트를 수행 할 때, 루프 모드에서 swiper

1, 파일의 도입 :

< 링크를 확인해 = "스타일 시트" HREF = "CSS / swiper.min.css" > 
< 스크립트 SRC = "JS / swiper.min.js" > </ 스크립트 >

2, 스타일 스타일 :

HTML, 
        본체 { 
            위치 : 상대 ; 
            신장 : 100 % ; 
        } 
        
        몸 { 
            배경 : #eee ; 
            글꼴 - 가족 : 헬 베티 노이에, 돋움, 바탕, 굴림, 산세 리프 ; 
            폰트 사이즈 : 14px ; 
            색상 : # 000 ; 
            여백 : 0 ; 
            패딩 : 0 ; 
        }
        
        .swiper 컨테이너 { 
            폭 : 100 % ; 
            신장 : 100 % ; 
            여백 왼쪽 : 자동 ; 
            마진 오른쪽 : 자동 ; 
        } 
        
        .swiper 슬라이드 { 
            텍스트 정렬 : 센터 ; 
            폰트 사이즈 : 18px ; 
            배경 : #fff ;
            / * 센터 슬라이드 텍스트 세로 * / 
            디스플레이 : -webkit-상자; 
            디스플레이 : -ms-인 flexbox ; 
            디스플레이 : -webkit-플렉스 ; 
            디스플레이 : 플렉스 ; 
            -webkit-상자 팩 : 센터 ; 
            -ms-플렉스 팩 : 센터 ; 
            -webkit-정당화-내용 : 센터 ; 
            정당화-내용 : 센터 ; 
            -webkit-박스 정렬 : 센터 ; 
            -ms-플렉스 정렬 : 센터 ; 
            -webkit 얼라-상품: 센터 ; 
            정렬-항목 : 센터 ; 
        }

3, 신체 :

< DIV 클래스 = "swiper 컨테이너 swiper 노 와이프" > 
        < DIV 클래스 = "swiper 래퍼" > 
            < DIV 클래스 = "swiper 슬라이드" > 
                < IMG SRC = "이미지 / n1.jpg" ALT = "" > 
            </ DIV > 
            < DIV 클래스 = "swiper 슬라이드" > 
                < IMG SRC = "이미지 / n2.jpg" ALT = "" > 
            </ DIV > 
            <DIV의 클래스 = "swiper 슬라이드" > 
                < IMG SRC= "이미지 / n3.jpg" ALT = "" > 
            </ DIV > 
            < DIV 클래스 = "swiper 슬라이드" > 
                < IMG SRC = "이미지 / n4.jpg" ALT = "" > 
            </ DIV > 
            < DIV 클래스 = "swiper 슬라이드" > 
                < IMG SRC = "이미지 / n5.jpg" ALT = "" > 
            </ DIV > 
        </ DIV > 
        < DIV 클래스 = "swiper - 페이징"> </ DIV > 
    </ DIV >

4, JS :

VAR Swiper = 새로운 새로운 Swiper는 ( '컨테이너 Swiper는.' , { 
            루프 : true로 , // 수동 슬라이딩 불가능하게 
            방향을 '수직' , 
            slidesPerView : . 1 , 
            spaceBetween : 30 , 
            속도 : 500 , 
            을 MouseWheel : true로 , 
            자동 실행 : { 
                disableOnInteraction : false로 , // 수동으로 재생을 방해하지 않고 밀어 
                1000 : 지연 
            } 
            페이지 매김을 : { 
                EL을 : '페이지 매김-.swiper를', 
                클릭 가능한이 : 참으로 , 
            }, 
　　　　　　　// suwper 현재 사진 인덱스를 인쇄 
            ON : { 
                slideChangeTransitionEnd를 () {
                     This.active = $를 ( '슬라이드 활성 - Swiper.') ATTR를 ( '슬라이드 - 데이터 - Swiper 색인을'. ) 
                    . VAR + 1 = SUM this.realIndex 
                    CONSOLE.LOG (SUM) 
                } 
            } 
        });