swiper基本用法之设置分页器样式（二）

.banner {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .swiper-container,
        .swiper-wrapper,
        .swiper-slide,
        .swiper-slide img {
            width: 100%;
            height: 100%;
        }

        .swiper-pagination-custom {
            bottom: 10px;
            left: 0;
            width: 100%;
        }

        .swiper-pagination-customs {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            background: #000;
            opacity: .3;
            margin: 0 5px;
        }

        .swiper-pagination-customs-active {
            opacity: 1;
            background-color: #F78E00;
        }
           

<!-- 轮播 -->
<div class="banner">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img src="../../image/guide/guide1.png" alt="">
			</div>
			<div class="swiper-slide">
				<img src="../../image/guide/guide2.png" alt="">
			</div>
			<div class="swiper-slide">
				<img src="../../image/guide/guide3.png" alt="">
			</div>
			<div class="swiper-slide" id="letGo">
				<img src="../../image/guide/guide4.png" alt="">
			</div>
		</div>
		<!-- 分页器 -->
		<div class="swiper-pagination"></div>
	</div>
</div>
           

var mySwiper = new Swiper( '.swiper-container', {
	   direction: 'horizontal',
	   autoplay: 0,
	   speed: 300,
	   loop: false,
	   paginationClickable: true,
	   autoplayDisableOnInteraction: false,
	   pagination: '.swiper-pagination',
	   paginationType: 'custom',
	   paginationCustomRender: function ( swiper, current, total ) {
	      var _html = '';
	      for ( var i = 1; i <= total; i++ ) {
		    if ( current == i ) {
		       _html += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
		     } else {
		       _html += '<span class="swiper-pagination-customs"></span>';
		     }
	        }
		 return _html; //返回所有的页码html
	    },
           onReachEnd: function ( swiper ) {
		 console.log( '到了最后一个slide' );
	    }
    } );