swipper 移动端导航轮播图

html 页面

<link rel="stylesheet" href="css/swiper.min.css">         //引入的css文件

<div class="swiper-container">
       <div class="swiper-wrapper">
           <div class="swiper-slide">
               <img src="img/1.png" alt="" style=" width: 100%; height: auto;display: block;max-height: 100%;">
               <p style="background-color:#000000;opacity: 0.2;width: 100%;position: absolute;bottom:0px;height:40px;"></p>
               <p style="color:#fff;position: absolute;bottom:0px;height:40px;line-height:40px;padding-left:4%;">导航标题名称1</p>
           </div>
           <div class="swiper-slide">
               <img src="img/2.png" alt="" style=" width: 100%;max-height: 100%;max-width: 100%; display: block; ">
               <p style="background-color:#000000;opacity: 0.2;width: 100%;position: absolute;bottom:0px;height:40px;"></p>
               <p style="color:#fff;position: absolute;bottom:0px;height:40px;line-height:40px;padding-left:4%;">导航标题名称2</p>
           </div>
       </div>
       <!-- 如果需要分页器 -->
       <div class="swiper-pagination"></div>
</div>

 

引入的js 文件以及js引入

<script type="text/javascript" src="js/swiper.min.js">

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
   <script>
       var mySwiper = new Swiper('.swiper-container',{
           pagination: {
               el: '.swiper-pagination',        //分页
           },
           autoplay: true        //轮播图自动滚动
       })
   </script>