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


<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>
        
        <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滑动效果图:
swiper滑动之3D 初始滑块索引为第二个_第1张图片

你可能感兴趣的:(移动端开发,swiper插件实用,索引,3d,swipe,滑动)