次に、同じ文: Cuihua、コード: 次に、同じ文: Cuihua、コード:
ホームページ > 記事 > ウェブフロントエンド > スワイプを使用した 3D カルーセル チャートの実装チュートリアルの例
今日のカルーセルは、少し 3D 効果があると言えます。移動すると、立方体の形で左右に回転します。
まず、プラグインを紹介します。 85ca11db9a2596384621c19b0d64b376
2a0eafb106da779d21dab051a37d79dd2cacc6d41bbb37262a98f745aa00fbf0
そして、同じです。文:Cuihua、コードをアップロードしてください:
<!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('.swiper-container', { pagination: '.swiper-pagination', //循环 往返的动 loop:true, //小白点不能点击 autoplayDisableOnInteraction:false, effect: 'cube', grabCursor: true, cube: { shadow: true, slideShadows: true, shadowOffset: 20, shadowScale: 0.94 } }); </script> </body> </html>
以上がスワイプを使用した 3D カルーセル チャートの実装チュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。