swiper组件

使用swiper来实现轮播图

由于简单这里当然就不会去详细介绍了，推荐两个网址：

1.http://www.swiper.com.cn/usage/index.html 它很简明地告诉了你应该如何去搭建这样的框架。

2.http://www.swiper.com.cn/api/ 这里讲述了我们应该如何去设置更多的功能。

1 加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper.min.js"></script>
    ...
</body>
</htm

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

自动轮播
在这里插入图片描述

css:
.swiper-container {
  margin-top: 44px;
    width: 100%;
    height: 150px;
    border: 0;
}
.swiper-container img {
    width: 100%;
    height: 150px;
    border: 0;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

html:
<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img data-src="images/tim.jpg" class="swiper-lazy" /></div>
            <div class="swiper-slide"><img data-src="images/timg.jpg" class="swiper-lazy" /></div>
            <div class="swiper-slide"><img data-src="images/timgg.jpg" class="swiper-lazy" /></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-white"></div>
    </div>
    
<script>
var swiper = new Swiper('.swiper-container', {
     lazy: true,
       pagination: {
           el: '.swiper-pagination',
       },
       spaceBetween: 30,
       centeredSlides: true,
       autoplay: {
           delay: 2500,
           disableOnInteraction: false,
       }
   });
 </script>

猜你喜欢