swiper滑动之3D 初始滑块索引为第二个

最新推荐文章于 2024-05-21 09:48:42 发布

Aiences

最新推荐文章于 2024-05-21 09:48:42 发布

阅读量3.4k

点赞数

分类专栏：移动端开发 swiper插件实用文章标签：索引 3d swipe 滑动

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

版权

移动端开发同时被 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>
        .doc-example{
            margin-top: .21rem;
        }
    </style>
</head>
<body>
<div class="doc-example ">
    <div class="swiper-container swiper-container-horizontal swiper-container-3d swiper-container-coverflow" id='mySwiper' style="cursor: -webkit-grab;">
        <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(1px, 0px, 0px);">
        <!-- 第一张图 -->
            <div class="swiper-slide swiper-slide-active" style="background-image: url(../img/silver_card.png);background-size: 2.25rem  1.5rem;height: 1.5rem;width: 2.25rem;background-repeat: no-repeat;transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg); z-index: 1; transition-duration: 0ms;">
                <div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;">
                </div>
                <div class="swiper-slide-shadow-right" style="opacity: 0; transition-duration: 0ms;">
                </div>
            </div>
        <!-- 第二张图 -->
            <div class="swiper-slide swiper-slide-next" style="background-image: url(../img/gold_card.png);background-size: 2.25rem  1.5rem;height: 1.5rem;width: 2.25rem;background-repeat: no-repeat;transform: translate3d(0px, 0px, -100px) rotateX(0deg) rotateY(-50deg); z-index: 0; transition-duration: 0ms;">
                <div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;">
                </div>
                <div class="swiper-slide-shadow-right" style="opacity: 1; transition-duration: 0ms;">
                </div>
            </div>
        <!-- 第三张图 -->
            <div class="swiper-slide" style="background-image: url(../img/diamond_card.png);background-size: 2.25rem  1.5rem;height: 1.5rem;width: 2.25rem;background-repeat: no-repeat;transform: translate3d(0px, 0px, -200px) rotateX(0deg) rotateY(-100deg); z-index: -1; transition-duration: 0ms;">
                <div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;">
                </div>
                <div class="swiper-slide-shadow-right" style="opacity: 2; transition-duration: 0ms;">
                </div>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination">
            <span class="swiper-pagination-bullet swiper-pagination-bullet-active">
            </span>
            <span class="swiper-pagination-bullet">
            </span>
            <span class="swiper-pagination-bullet">
            </span>
            <span class="swiper-pagination-bullet">
            </span>

        </div>
    </div>
</div>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/amazeui.swiper.min.js"></script>
<script>
    $('#mySwiper').swiper({
        pagination: '#mySwiper .swiper-pagination',
        effect: 'coverflow',
        grabCursor: true,
        initialSlide:1,//用来设定页面加载完成时，第几张图片先显示出来
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflow: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: true,
//            loop : true,
//            slidesPerView : 'auto',
//            loopedSlides :8
        }
    });
</script>
</html>

最终3D滑动效果图：
移动端，3D滑动效果图

Aiences

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
swiper滑动之3D 初始滑块索引为第二个

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

扫一扫