BANNER幻燈片底部下面有小圖片點擊切換swiper效果

BANNER幻燈片底部下面有小圖片點擊切換swiper效果 

//參考：https://www.swiper.com.cn/demo/070-pagination-custom.html
  //參考：https://www.swiper.com.cn/api/pagination/70.html

實例見彩石效果圖網站

<!--banner begin-->



  <!-- Swiper -->
  <div class="swiper-container" style="background-color:#000000; ">
    <div class="swiper-wrapper">
								<div class="swiper-slide">
										<a href="/" target="_blank">
											<img src="{dede:global.cfg_templets_skin/}/images/banan1.jpg" class="swiper-lazy"  />
										</a>
									</div>
								<div class="swiper-slide">
										<a href="/" target="_blank">
											<img src="{dede:global.cfg_templets_skin/}/images/banan2.jpg" class="swiper-lazy" />
										</a>
									</div>
								<div class="swiper-slide">
										<a href="/" target="_blank">
											<img src="{dede:global.cfg_templets_skin/}/images/banan3.jpg" class="swiper-lazy" />
										</a>
									</div>
								<div class="swiper-slide">
										<a href="/" target="_blank">
											<img src="{dede:global.cfg_templets_skin/}/images/banan4.jpg" class="swiper-lazy" />
										</a>
									</div>
								</div>
    </div>
    <!-- Add Pagination -->
	
    <div class="swiper-pagination" style="top:-2px;position:relative;"></div>
  </div>

  <!-- Swiper JS -->
  <!-- Initialize Swiper -->
  <script>
  //參考：https://www.swiper.com.cn/demo/070-pagination-custom.html
  //參考：https://www.swiper.com.cn/api/pagination/70.html
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
			switch(index){
            case 0:text='2020開運大禮';break;
            case 1:text='選彩石效果圖享更多滿贈禮';break;
            case 2:text='VR全景贈送2張視角';break;
            case 3:text='效果圖行業首選品質保障';break;
          }
        
          return '<span class="' + className + '" style="top:-10px;position:relative;color:#c49ea5;width:200px;height:60px;line-height:60px;border-radius:0;">' + text + '</span>';
        },




      },
    });
  </script>
<style>
.swiper-pagination{background-color:#000000; width:100%;height:50px;}
 .swiper-pagination-bullet {
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      color:#000;
      opacity: 1;
      background: rgba(0,0,0,0);
    }

    .swiper-pagination-bullet-active {
      color:#c49ea5;
      background: #d51b51;
    }

</style>

<!--banner end-->