swiper7-19. 花式轮播1

  1 <template>
  2   <div class="swiper mySwiper">
  3     <div class="swiper-wrapper">
  4       <div class="swiper-slide">
  5         <img src="images/nature-1.jpg" />
  6       div>
  7       <div class="swiper-slide">
  8         <img src="images/nature-2.jpg" />
  9       div>
 10       <div class="swiper-slide">
 11         <img src="images/nature-3.jpg" />
 12       div>
 13       <div class="swiper-slide">
 14         <img src="images/nature-4.jpg" />
 15       div>
 16       <div class="swiper-slide">
 17         <img src="images/nature-5.jpg" />
 18       div>
 19       <div class="swiper-slide">
 20         <img src="images/nature-6.jpg" />
 21       div>
 22       <div class="swiper-slide">
 23         <img src="images/nature-7.jpg" />
 24       div>
 25       <div class="swiper-slide">
 26         <img src="images/nature-8.jpg" />
 27       div>
 28       <div class="swiper-slide">
 29         <img src="images/nature-9.jpg" />
 30       div>
 31     div>
 32     <div class="swiper-pagination">div>
 33     
 34   div>
 35 template>
 36 <script>
 37 import Swiper from "swiper/swiper-bundle.min.js";
 38 import "swiper/swiper-bundle.min.css";
 39 
 40 export default {
 41   components: {},
 42   methods: {},
 43   mounted() {
 44     this.$nextTick(() => {
 45       // 创建swiper对象
 46       const swiper = new Swiper(".mySwiper", {
 47         // effect 设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）
 48         effect: "coverflow",
 49         // grabCursor 该选项给Swiper用户提供小小的贴心应用，设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
 50         grabCursor: true,
 51         // 设定为true时，active slide会居中，而不是默认状态下的居左。
 52         centeredSlides: true,
 53         // 设置slider容器能够同时显示的slides数量(carousel模式)。
 54         slidesPerView: "auto",
 55         // cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数
 56         coverflowEffect: {
 57           rotate: 50,
 58           stretch: 0,
 59           depth: 100,
 60           modifier: 1,
 61           slideShadows: true,
 62         },
 63         pagination: {
 64           el: ".swiper-pagination",
 65         },
 66       });
 67     });
 68   },
 69 };
 70 script>
 71 
 72 <style>
 73 html,
 74 body {
 75   position: relative;
 76   height: 100%;
 77 }
 78 
 79 body {
 80   background: #eee;
 81   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 82   font-size: 14px;
 83   color: #000;
 84   margin: 0;
 85   padding: 0;
 86 }
 87 
 88 .swiper {
 89   width: 100%;
 90   padding-top: 50px;
 91   padding-bottom: 50px;
 92 }
 93 
 94 .swiper-slide {
 95   background-position: center;
 96   background-size: cover;
 97   width: 300px;
 98   height: 300px;
 99 }
100 
101 .swiper-slide img {
102   display: block;
103   width: 100%;
104 }
105 style>