swiper.js 逐个动画效果

    <style>
    	.swiper-h3 .swiper-slide { 
    		opacity: 0;
		    -webkit-transition: 1s;
		    -o-transition: 1s;
		    transition: 1s;
    	 }
    	.swiper-h3  .mon1,.swiper-h3 .mon2,.swiper-h3 .mon3{
    		opacity: 1;
    	}
        .swiper-h3 .mon2{
            transition-delay:.3s;
    -webkit-transition-delay:.3s; 
        }
        .swiper-h3 .mon3{
            transition-delay:.6s;
    -webkit-transition-delay:.6s; 
        }
    </style>

        var swiper3 = new Swiper('.swiper-h3 .swiper-container', {
            loop: true,
            autoplay: 500,
            speed: 0,
            slidesPerView: 3,
            slidesPerGroup : 3,
            // effect : 'fade',
            pagination: '.swiper-pagination',
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 65,
            breakpoints: {
                1700: {
                    spaceBetween: 40,
                },
                1183: {
                    slidesPerView: 2,
                    spaceBetween: 40,
                    autoplay: 5000,
                    speed: 3000,
                    slidesPerGroup : 1
                },
                767: {
                    autoplay: 5000,
                    speed: 3000,
                    slidesPerView: 1,
                    spaceBetween: 0,
                    slidesPerGroup : 1
                }
            },
            onSlideChangeStart: function(swiper,even){
		      // 在当前的下面添加动画class名
              $('.swiper-h3 .swiper-slide').removeClass('mon1 mon2 mon3');
              $('.swiper-h3 .swiper-slide-active').addClass('mon1').next().addClass('mon2').next().addClass('mon3');
            }
        });