Example tutorial of implementing 3D carousel chart with Swipe-JS Tutorial-php.cn

Example tutorial of implementing 3D carousel chart with Swipe

零下一度

Release： 2017-06-27 09:51:07

Original

3106 people have browsed it

Today’s carousel picture is a little different from the usual ones! It can be said to have a little 3D effect! Because when it is moving, it rolls left and right in the shape of a cube;

First introduce the plug-in:

Then it’s still the same sentence: Cuihua, add the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
	<meta name="viewport" content="width=device-width,initial-scale=1"/>

    <link rel="stylesheet" href="swiper.css?1.1.11">

    <style>
    /*样式*/
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    img{
    	width: 100%;
    	height: 100%;
    }
    .swiper-container {
        width: 500px;
        height: 500px;
        position: absolute;
        left: 45%;
        top: 35%;
        margin-left: -150px;
        margin-top: -150px;
    }
    .swiper-slide {
        background-position: center;
        background-size: cover;
    }
    </style>
</head>
<body>
<!-- Swiper轮播图 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
            <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <script src="swiper.js?1.1.11"></script>

   <script>
    var swiper = new Swiper(&#39;.swiper-container&#39;, {
        pagination: &#39;.swiper-pagination&#39;,
        
        //循环 往返的动
        loop:true,
                //小白点不能点击
		autoplayDisableOnInteraction:false,
		
        effect: &#39;cube&#39;,
        grabCursor: true,
        cube: {
            shadow: true,
            slideShadows: true,
            shadowOffset: 20,
            shadowScale: 0.94
        }
    });
    </script>
</body>
</html>

Copy after login

Isn’t it very simple!!!

The above is the detailed content of Example tutorial of implementing 3D carousel chart with Swipe. For more information, please follow other related articles on the PHP Chinese website!