html:

  <div style="width:600px">
<div id="banner">  
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
		<img src="img/s01.jpg">
		<p style="margin-top:-55px;color:#fff;background:rgba(100,55,66,0.5)">阿斯蒂芬是否都是大</p>
	  </div>
      <div class="swiper-slide">
		<img src="img/s02.jpg">
		<p style="margin-top:-55px;">阿斯蒂芬是否都是大</p>
	  </div>
      <div class="swiper-slide">
		<img src="img/s03.jpg">
		<p style="margin-top:-55px;">阿斯蒂芬是否都是大</p>
	  </div>
      <div class="swiper-slide">
		<img src="img/s04.jpg">
		<p style="margin-top:-55px;">阿斯蒂芬是否都是大</p>
	  </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
</div>
</div>
 

css:

  <style>
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
	#banner{
		max-width:1200px;}
    .swiper-slide {
       width:auto;
    }
	.swiper-slide img{
		width:600px;
		height: 400px;
	}
	.swiper-slide p{
		width:600px;
		    z-index: 15000000;
    position: relative;
	}
	.swiper-pagination{
		position:relative;
		width:600px;}
	.swiper-pagination-bullet{
		width:25%;
		height:auto;
		background:none;}
	.swiper-pagination-bullet img{
		width:150px;}		
  </style>
 

js:

<script>
  window.onload = function() {
    var swiper = new Swiper('.swiper-container',{
			pagination: {
			    el: '.swiper-pagination',
		    	clickable: true,
			    renderBullet: function (index, className) {
			        return '<span class="' + className + '"><image src="img/s0' + ( index  + 1 ) + '.jpg"></span>';
		    	},
	       },
	});
  }
</script>
 

需要引用 swiper-4.2.2.min.css和swiper-4.2.2.min.js