vue2使用swiper6

如图

npm install swiper@6.4.5 --save

1.  
   <template>
2.  
   <div class="swipers">
3.  
   <div class="swiper-area">
4.  
   <div class="swiper-container">
5.  
   <div class="swiper-wrapper">
6.  
   <div class="swiper-slide" v-for="value in 10" :key="value">{{value}}</div>
7.  
   </div>
8.  
   </div>
9.  
   </div>
10.  
    </div>
11.  
    </template>
12.  
    <script>
13.  
    // import Swiper, {Pagination,Navigation} from "swiper"
14.  
    // Swiper.use([Pagination,Navigation])
15.  
    import Swiper from "swiper"
16.  
    import "swiper/swiper-bundle.css"
17.  
     
18.  
    export default {
19.  
    components: {
20.  
    // Swiper,
21.  
    // SwiperSlide,
22.  
    },
23.  
    mounted() {
24.  
    new Swiper('.swiper-container', {
25.  
    slidesPerView: 5,
26.  
    autoplay: true,//可选选项，自动滑动
27.  
    spaceBetween: 12,
28.  
    centeredSlides: true,
29.  
    loop: true,
30.  
    })
31.  
    },
32.  
    methods: {
33.  
    onSwiper(swiper){
34.  
    console.log(swiper);
35.  
    },
36.  
    onSlideChange(){
37.  
    console.log('slide change');
38.  
    }
39.  
    },
40.  
    };
41.  
    </script>
42.  
    <style lang="less" scoped>
43.  
    .swipers{
44.  
    width: 100%;
45.  
    display: flex;
46.  
    flex-direction: column;
47.  
    align-items: center;
48.  
    // border: 1px solid red;
49.  
    position: relative;
50.  
    }
51.  
    .swiper-area {
52.  
    position: absolute;
53.  
    top: 0px;
54.  
    height: 40px;
55.  
    width: 100%;
56.  
    /* background: #eee; */
57.  
    }
58.  
    .swiper-container {
59.  
    width: 100%;
60.  
    height: 100%;
61.  
    }
62.  
    .swiper-slide {
63.  
    text-align: center;
64.  
    font-size: 3px;
65.  
    background: pink;
66.  
    display: -webkit-box;
67.  
    display: -ms-flexbox;
68.  
    display: -webkit-flex;
69.  
    display: flex;
70.  
    -webkit-box-pack: center;
71.  
    -ms-flex-pack: center;
72.  
    -webkit-justify-content: center;
73.  
    justify-content: center;
74.  
    -webkit-box-align: center;
75.  
    -ms-flex-align: center;
76.  
    -webkit-align-items: center;
77.  
    align-items: center;
78.  
    // width: 130px !important;
79.  
    transition: 300ms;
80.  
    transform: scale(0.8);
81.  
    }
82.  
    .swiper-slide-active,.swiper-slide-duplicate-active{
83.  
    transform: scale(1);
84.  
    // width: 50px !important;
85.  
    }
86.  
    .swiper-slide:not(.swiper-slide-prev,.swiper-slide-active,.swiper-slide-next){
87.  
    // border: 1px solid red;
88.  
    transform: scale(0.6);
89.  
    // height: 15px;
90.  
    // margin-top: 10px;
91.  
    }
92.  
    // .swiper-slide-prev,.swiper-slide-next{
93.  
    // width: 40px !important;
94.  
    // }
95.  
    /* .swiper-slide-next{
96.  
    margin-right: 0 !important;
97.  
    } */
98.  
    </style>

这篇好文章是转载于：学新通技术网