vue-awesome-swiper轮播组件

 安装版本："swiper": "^6.0.0",

安装版本："vue-awesome-swiper": "^4.1.1",

  <div class="swiper_conter">
        <swiper class="swiper" :options="swiperOption" ref="mySwiper">
          <swiper-slide
            class="swiper-wrapper"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <div class="swiper-slide" @mouseenter="mouseenterchange(item.pic)">
              <div class="awiper_icon"></div>
              <el-image
                class="multimedia"
                :src="item.pic"
                fit="fill"
              ></el-image>
              <h3 class="dot">{
  { item.name }}</h3>
            </div>
          </swiper-slide>
        </swiper>
        <div class="owl-next" @click="swiperNext"></div>
        <div class="owl-prev" @click="swiperPrev"></div>
    </div>

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  components: {
    Swiper,
    SwiperSlide,
  },
 data() {
    return {
       dataList:[{pic:'图片',name:'文字'}],
          swiperOption: {
            loop: false,
            slidesPerView: 4,
            spaceBetween: 30,
            navigation: {
              nextEl: '.owl-next',
              prevEl: '.owl-prev',
           },
      },
    }
}

    mouseenterchange(url) {
      console.log('鼠标移入')
    },
    swiperNext() {
      this.$refs.mySwiper.$swiper.slideNext()
    },
    swiperPrev() {
      this.$refs.mySwiper.$swiper.slidePrev()
    },

.swiper_conter {
  position: relative;
  margin: 36px 0 120px;
  padding: 0 30px;
  width: 100%;
  overflow: hidden;
  height: 188px;
  .swiper {
    .swiper-wrapper {
      padding: 0 15px;
      .swiper-slide {
        position: relative;
        .multimedia {
          width: 100%;
          height: 143px;
        }
        .dot {
          border: 1px solid #e8e8e8;
          border-top: 0;
          line-height: 42px;
          padding: 0 3%;
          font-weight: normal;
          font-size: 16px;
          text-align: center;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          &:hover {
            background-image: linear-gradient(to top, #c1ac8c 0%, #d3bf9f 100%);
            border-color: #d3bf9f;
            color: #fff;
          }
        }
        .awiper_icon {
          width: 50px;
          height: 50px;
          top: 25%;
          left: 40%;
          z-index: 99;
          position: absolute;
          background: url('https://www.yglock.com/cn/images/PicList002173-icon_video.png')
            no-repeat center center;
        }
      }
    }
  }
  .owl-prev {
    position: absolute;
    width: 28px;
    height: 28px;
    top: 50%;
    margin-top: -14px;
    left: 0;
    background: url('https://www.yglock.com/cn/images/PicList002173-btn.png')
      no-repeat left bottom;
    cursor: pointer;
  }
  .owl-next {
    position: absolute;
    width: 28px;
    height: 28px;
    top: 50%;
    margin-top: -14px;
    right: 0;
    background: url('https://www.yglock.com/cn/images/PicList002173-btn.png')
      no-repeat right bottom;
    cursor: pointer;
  }
}