vue中使用Swiper

一、安装依赖

npm i swiper

二、项目中使用

import {swiper,swiperSlide} from "vue-awesome-swiper";

import "swiper/css/swiper.css";

<div class="lb">
     <swiper ref="mySwiper" :options="swiperOptions" >
           <swiper-slide  v-for="(el,index) in 3" :key="index">
                 <div v-for="(el,index) in 6" :key="index">
                    <div class="text">公安法制</div>
                     <div class="num">56</div>
                 </div>
            </swiper-slide>

             <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <!-- <div class="swiper-button-prev swiper-button-prevsp" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-nextsp" slot="button-next"></div> -->
</div>


    data: () => ({
        swiperOptions: {
            loop: false,
            speed: 2000,
            // autoplay: {
            //     // delay: 3000,
            //     stopOnLastSlide: false,
            //     disableOnInteraction: false,
            // },
            // 显示分页
            pagination: {
                el: ".swiper-pagination",
                clickable: true, //允许分页点击跳转
            },
            // 设置点击箭头
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            touchStartPreventDefault: false, //不阻止触摸事件
        }
    }),

 .lb{
     width: calc(100% - 200px); 
     height:183px;
     >>>.swiper-container {
          width: 100%;
          height: 100%;
          margin-left: auto;
          margin-right: auto;
          .swiper-wrapper{
              width: 100%;
              height: 173px;
              .swiper-slide {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-wrap: wrap;
                  &>div{
                     width: 85px;
                     height: 71px;
                     background: url(../assets/dbjyb.png) no-repeat;
                     background-size: 100% 100%;
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     .text{
                         font-family: SourceHanSansCN-Regular;
                         font-size: 14px;
                         color: #32C5FF;
                         letter-spacing: 0;
                         text-align: center;
                         line-height: 18px;
                         font-weight: 400;
                     }
                     .num{
                         font-family: SourceHanSansCN-Bold;
                         font-size: 24px;
                         color: #0491C9;
                         letter-spacing: 0;
                         text-align: center;
                         line-height: 30px;
                         font-weight: 700;
                         margin-top: 8px;
                     }
             }
        }
   }
   .swiper-pagination{
        width: 100%;
        bottom:0px;
        .swiper-pagination-bullet{
              width: 8px;
              height: 8px;
              background: #0090DE;
              border-radius: 50%;
        }
        .swiper-pagination-bullet-active{
              width: 20px;
              height: 8px;
              background: #46B5F8;
              border-radius: 3px;
        }
    }
 }
                       
}