swiper之平面滑动,第二张图片在中间


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>title>
    <link href="../css/amazeui.swiper.min.css" rel="stylesheet">
    <style>
        body{
            background: #FFFFFF;
        }
        .swiper-container {
            width: 100%;
            height: 1.6rem;
            margin-top: .21rem;
        }
        .swiper-wrapper li{
            width: 2.25rem;
            position: relative;
        }
        .swiper-image{
            width: 2.25rem;
            height: 1.5rem;
        }
        .message{
            padding: .1rem  .12rem;
            width: 2.25rem;
            position: absolute;
            z-index: 2;
            left:0;
            top:0;
        }
        .lever{
            font-family: Poppins-Medium;
            font-size: .24rem;
            color: #FFFFFF;
        }
        .name{
            font-size: .12rem;
            color: #A08761;
            position: absolute;
            right: .12rem;
            top: .15rem;
        }
        .price{
            font-size: .24rem;
            color: #FFFFFF;
            position: absolute;
            right: .12rem;
            top: 1.05rem;
        }

    style>
head>
<body>
    
    <div class="swiper-container">
        <ul class="swiper-wrapper">
            <li class="swiper-slide">
                <img src="../img/silver_card3.png" class="swiper-image">
                <div class="message">
                    <span class="lever">银牌会员span>
                    <span class="name">发源地span>
                    <span class="price">¥500span>
                div>

            li>
            <li class="swiper-slide">
                <img src="../img/gold-card3.png" class="swiper-image">
                <div class="message">
                    <span class="lever">金牌会员span>
                    <span class="name">发源地span>
                    <span class="price">¥500span>
                div>
            li>
            <li class="swiper-slide">
                <img src="../img/diamond_card3.png" class="swiper-image">
                <div class="message">
                    <span class="lever">钻石会员span>
                    <span class="name">发源地span>
                    <span class="price">¥500span>
                div>
            li>
        ul>
        
        <div class="swiper-pagination">div>
    div>

body>
<script src="../js/jquery-3.2.1.min.js">script>
<script src="../js/amazeui.swiper.min.js">script>
<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 'auto',
        initialSlide:1,//用来设定页面加载完成时,第几张图片先显示出来
        centeredSlides: true,
        spaceBetween: 30,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
    },
    });
script>
html>
  //通过定位将文字信息附到图片上

滑动效果图。最初页面
swiper之平面滑动,第二张图片在中间_第1张图片

你可能感兴趣的:(swiper插件实用,移动端开发,swiper滑动,在图片上写字,jquery,css)