swiper实现图片轮播功能

OECOM

发布于 2020-07-01 09:34:26

7.2K00

代码可运行

文章被收录于专栏：OECOMOECOM

运行总次数：0

代码可运行

2015-09-15 16:57:30

swiper是一个相当强大的图片展示插件，下面我来介绍一下swiper的简单图片轮播功能。一般情况下我们所说的图片轮播就是在一个区域内有几张图片循环展示，有的可以滑动图片观看下一张图，有的可以点击图下方的小点来选择哪个图，也有点击两侧的左右按钮来切换图片展示。我们先来看一下如何实现

<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 class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- 在图片下方增加小点 -->
        <div class="swiper-pagination"></div>
        <!-- 增加左右按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

上方这几个div暂且先替代图片，和图片的展示效果相同，下面再来看一下js该如何写

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <!-- 引入js的核心插件包 -->
    <script src="../dist/js/swiper.jquery.min.js"></script>

    <!--初始化Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev'
    });

这样他的基本功能就实现了，当然还需要一些样式来让他们的排列便于观看

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

    <!-- 页内css样式 -->
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .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;
    }
    </style>

如果您想让图片下方的小圆点变成数字，只需要在css样式中增加下面的代码

.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.2);
    }
    .swiper-pagination-bullet-active {
        color:#fff;
        background: #007aff;
    }

然后在初始化Swiper时写成这样

 <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
		paginationBulletRender: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev'
    });
    </script>