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

最新推荐文章于 2024-06-03 15:23:16 发布

Aiences

最新推荐文章于 2024-06-03 15:23:16 发布

阅读量2.5k

点赞数 2

分类专栏： swiper插件实用移动端开发文章标签： swiper滑动在图片上写字 jquery css

本文链接：https://blog.csdn.net/qq_41283814/article/details/78754221

版权

移动端开发同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

swiper插件实用

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<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>
    <!-- Swiper -->
    <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">¥500</span>
                </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">¥500</span>
                </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">¥500</span>
                </div>
            </li>
        </ul>
        <!-- Add Pagination -->
        <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>

  //通过定位将文字信息附到图片上

滑动效果图。最初页面

Aiences

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
swiper之平面滑动，第二张图片在中间

<!DOCTYPE html><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>
复制链接

扫一扫