<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link charset="UTF-8" rel="stylesheet" href="css/spinner.css"> <style> .swiper-container { width: 100%; height: 1.41rem; overflow: hidden; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> <div class="swiper-slide">slider2</div> <div class="swiper-slide">slider3</div> </div> </div> <script> var mySwiper = new Swiper('.swiper-container', { direction: 'horizontal', // 水平切换选项 autoplay:true, observer:true, observeParents:true,
effect : 'coverflow',// cube // 切换效果
autoplayDisableOnInteraction:false, touchRatio : 0.5,//触摸变慢 effect : 'cube', dynamicBullets:true, }) </script> </body> </html>