swiper7-20. 花式轮播图3

  1 <template>
  2   <div class="swiper mySwiper">
  3     <div class="swiper-wrapper">
  4       <div class="swiper-slide">Slide 1</div>
  5       <div class="swiper-slide">Slide 2</div>
  6       <div class="swiper-slide">Slide 3</div>
  7       <div class="swiper-slide">Slide 4</div>
  8       <div class="swiper-slide">Slide 5</div>
  9       <div class="swiper-slide">Slide 6</div>
 10       <div class="swiper-slide">Slide 7</div>
 11       <div class="swiper-slide">Slide 8</div>
 12       <div class="swiper-slide">Slide 9</div>
 13     </div>
 14     <!-- 花式轮播图3 -->
 15   </div>
 16 </template>
 17 <script>
 18 import Swiper from "swiper/swiper-bundle.min.js";
 19 import "swiper/swiper-bundle.min.css";
 20 
 21 export default {
 22   components: {},
 23   methods: {},
 24   mounted() {
 25     this.$nextTick(() => {
 26       // 创建swiper对象
 27       const swiper = new Swiper(".mySwiper", {
 28         // 设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）
 29         effect: "cards",
 30         // 该选项给Swiper用户提供小小的贴心应用，设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
 31         grabCursor: true,
 32       });
 33     });
 34   },
 35 };
 36 </script>
 37 
 38 <style>
 39 html,
 40 body {
 41   position: relative;
 42   height: 100%;
 43 }
 44 
 45 body {
 46   background: #eee;
 47   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 48   font-size: 14px;
 49   color: #000;
 50   margin: 0;
 51   padding: 0;
 52 }
 53 
 54 .swiper {
 55   width: 240px;
 56   height: 320px;
 57 }
 58 
 59 .swiper-slide {
 60   display: flex;
 61   align-items: center;
 62   justify-content: center;
 63   border-radius: 18px;
 64   font-size: 22px;
 65   font-weight: bold;
 66   color: #fff;
 67 }
 68 
 69 .swiper-slide:nth-child(1n) {
 70   background-color: rgb(206, 17, 17);
 71 }
 72 
 73 .swiper-slide:nth-child(2n) {
 74   background-color: rgb(0, 140, 255);
 75 }
 76 
 77 .swiper-slide:nth-child(3n) {
 78   background-color: rgb(10, 184, 111);
 79 }
 80 
 81 .swiper-slide:nth-child(4n) {
 82   background-color: rgb(211, 122, 7);
 83 }
 84 
 85 .swiper-slide:nth-child(5n) {
 86   background-color: rgb(118, 163, 12);
 87 }
 88 
 89 .swiper-slide:nth-child(6n) {
 90   background-color: rgb(180, 10, 47);
 91 }
 92 
 93 .swiper-slide:nth-child(7n) {
 94   background-color: rgb(35, 99, 19);
 95 }
 96 
 97 .swiper-slide:nth-child(8n) {
 98   background-color: rgb(0, 68, 255);
 99 }
100 
101 .swiper-slide:nth-child(9n) {
102   background-color: rgb(218, 12, 218);
103 }
104 
105 .swiper-slide:nth-child(10n) {
106   background-color: rgb(54, 94, 77);
107 }
108 </style>