swiper横向轮播--3d

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="idangerous.swiper.css"/>
    <link rel="stylesheet" href="idangerous.swiper.3dflow.css"/>
    <style>
        *{margin:0;padding:0}
        .swiper{position:relative}
        .swiper-container{width:900px;height:300px;z-index:2;margin:0 auto}
        .swiper-slide{width:300px;height:100%;}
        .swiper-slide a{display:block;width:100%;height:100%;}
        .pagination {
            position: absolute;
            z-index: 20;
            bottom:10px;
            width:100%;
            text-align:center;
        }

        .swiper-pagination-switch {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            background: #555;
            margin: 0 5px 0 0;
            opacity: 0.8;
            border: 1px solid #fff;
            cursor: pointer;
        }

        .swiper-active-switch {
            background: #f8bb00;
        }
        .device{width:100%;height:30px;position:absolute;top:50%;margin-top:-15px;z-index:20}
        .arrow-left{float:left}
        .arrow-right{float:right}
        .clearfix{zoom:1;}
        .clearfix:after{content:".";display:block;width:0;height:0;visibility:hidden;clear:both;}
    </style>
    <script src="jquery-1.11.3.min.js"></script>
    <script src="idangerous.swiper.min.js"></script>
    <script src="idangerous.swiper.3dflow.js"></script>
    <script>
        $(function(){
            var mySwiper = new Swiper('.swiper-container',{
                autoplay : 2000,//可选选项，自动滑动
                loop : true,//可选选项，开启循环
                pagination : '.pagination',
                paginationClickable :true,
                autoplayDisableOnInteraction: false,
                mousewheelControl: true,
                slidesPerView : 3,
                tdFlow: {
                    rotate : 0,//旋转
                    stretch :0,
                    depth: 300,//z-index值，值越大看起来离屏幕越远
                    modifier : 1,
                    shadows : false//产生了3d旋转的slide是否使用阴影
                }

            });
            $('.arrow-left').on('click', function(e){
                e.preventDefault();
                mySwiper.swipePrev()
            });
            $('.arrow-right').on('click', function(e) {
                e.preventDefault();
                mySwiper.swipeNext()
            })
        })
    </script>
</head>
<body>
<div class="swiper">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: red"><a href="javascript:void (0);">Slide1</a></div>
            <div class="swiper-slide" style="background-color: #808080"><a href="javascript:void (0);">Slide2</a></div>
            <div class="swiper-slide" style="background-color: green"><a href="javascript:void (0);">Slide3</a></div>
        </div>
    </div>
    <div class="pagination"></div>
    <div class="device clearfix">
        <a href="javascript:void (0);" class="arrow-left">&lt;</a>
        <a href="javascript:void (0);" class="arrow-right">&gt;</a>
    </div>
</div>
</body>


</html>
html-3d