Home >Web Front-end >JS Tutorial >Example tutorial of implementing 3D carousel chart with Swipe

Example tutorial of implementing 3D carousel chart with Swipe

零下一度Original: 2017-06-27 09:51:073088browse

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:

85ca11db9a2596384621c19b0d64b376
2a0eafb106da779d21dab051a37d79dd 2cacc6d41bbb37262a98f745aa00fbf0

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Vue project construction and practical example tutorialNext article：Vue project construction and practical example tutorial

See more

Example tutorial of implementing 3D carousel chart with Swipe

Related articles