pc使用vue-awesome-swiper 实现轮播组件

效果是这样的

    npm install swiper@4.0.7 vue-awesome-swiper@3.1.3 --save // 两个都可以 我用的是这个 

    npm install swiper@5.4.5 vue-awesome-swiper@4.1.1 --save

    安装好后在main.js中引入 （我用的是这种）
    /* 引入swiper */
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'
    Vue.use(VueAwesomeSwiper)

    单个引入应该也可以
    import 'swiper/dist/css/swiper.css'
    import { swiper,swiperSlide } from 'vue-awesome-swiper'
    //在components注册
    components: {swiper, swiperSlide},

    html是这样写的
   <div class="banner_box">
        <div class="swiper_box">
          <div class="prev">
            <img
              src="@/assets/images/newImage/left.png"
              alt=""
              class="swiper-button"
            />
          </div>
          <div class="swiper_">
            <swiper ref="mySwiper" :options="swiperOptions">
              <swiper-slide
                v-for="(item, index) in swiperArr"
                :key="index"
                class="slide_class"
              >
                <img class="swiper-img" :src="item.img" alt="" />
                <p class="slide_title">{{item.title}}</p>
                <p class="slide_text">{{item.text}}</p>
              </swiper-slide>
            </swiper>
          </div>
          <div class="next">
            <img
              src="@/assets/images/newImage/right.png"
              alt=""
              class="swiper-button"
            />
          </div>
        </div>
      </div>

    js是这样写的
    <script>
    import { swiper, swiperSlide } from "vue-awesome-swiper";
     components: {
    swiper,
    swiperSlide,
  },
    data() {
       return {
         swiperArr: [
                {
                  img: "https://img1.baidu.com/it/u=2440443318,3451881854&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                  title: "市场准入技术性措施信息平台",
                  text: "平台提供重点产品准入、目标国准入、热点领域准入、TBT/SPS通报库等…",
                },
                {
                  img: "https://pic.lvmama.com/uploads/pc/place2/2019-04-11/b6360ae0-4536-4cf7-b16e-757ba12463f0.jpg",
                  title: "标准信息服务平台",
                  text: "平台是国内标准信息资源最为丰富的平台之一，拥有超过100万条国内外标准化组织…",
                },
                {
                  img: "https://img2.baidu.com/it/u=2361676761,992841863&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800",
                  title: "食品及食用农产品标准法规信息支",
                  text: "平台提供重点产品准入、目标国准入、热点领域准入、TBT/SPS通报库等…",
                },
                {
                  img: "https://img2.baidu.com/it/u=3063238499,3730323951&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
                  title: "物联网标准与知识产权公共服务平台",
                  text: "平台是集物联网标准、专利、检测和认证认证等服务于一体的专业性公共服务平台…",
                },
              ],
          swiperOptions: {
           speed: 1500, // 幻灯片切换速度
            direction: 'horizontal', // 垂直切换选项
            // autoplay: {
            //   delay: 2000, // 幻灯片自动播放速度
            //   disableOnInteraction: true, // 用户操作swiper之后，是否禁止autoplay。
            // },
            loop: true,
            history: "love",
            // 设置点击箭头
            navigation: {
              nextEl: ".next",
              prevEl: ".prev",
            },
            slidesPerView: 4, // 一行显示两个
          },
           },
        };
        这个不知道有没有用， 反正我是加上了 不加也可以试试 
      computed: {
        swiper() {
          return this.$refs.mySwiper.$swiper;
        },
      },
      </script>
   css是这样的
      .banner_box {
      background: #bedaff;
      width: 100%;
      padding: 24px 20px;
      .swiper_box {
    width: 100%;
    height: 246px;
    display: flex;
    align-items: center;
    .swiper-button {
      cursor: pointer;
    }
    .swiper_ {
      width:100%;
      overflow :hidden;
      height:100%;
      text-align: center;
      align-items: center;
      .slide_class{
        width: 300px!important;
        height: 246px;
        border-radius: 4px;
        margin: 0 42px;
        background: #fff;
        .swiper-img {
          width:300px;
          height: 150px;
          //  object-fit: contain;
        } 
        .slide_title{
          font-family: AlibabaPuHuiTi_2_65_Medium;
          font-size: 16px;
          color: rgba(28,33,43,0.90);
          letter-spacing: 0;
          text-align: center;
          line-height: 16px;
          font-weight: bold;
          padding: 12px 0;
        }
        .slide_text{
          font-family: AlibabaPuHuiTi_2_55_Regular;
          font-size: 14px;
          color: rgba(28,33,43,0.90);
          letter-spacing: 0;
          font-weight: 400;
          padding: 0 12px;
        }
      }
           
    }
  }
    }