【Vue】vue2 vue-awesome-swiper 刷新无法自动滚动解决

努力挣钱的小鑫

于 2024-07-15 18:43:38 发布

阅读量98

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/IAIPython/article/details/140446213

版权

Vue 专栏收录该内容

39 篇文章 5 订阅

订阅专栏

      <div class="swiper-wrap">
        <Swiper v-if="list2.length > 0" style="margin-top: 10px" :options="swiperOptions2">
          <SwiperSlide v-for="(item, index) in list2" :key="index" :virtualIndex="index">
            <div class="swiper-card" @click="toLink(item.linkUrl)">
              <img :src="item.imageUrl ?? CZYLOG" alt="" :class="!item.imageUrl ? 'logo' : ''" />
            </div>
          </SwiperSlide>
        </Swiper>
      </div>

import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/bundle";
// 不引用不自动播放 解决方法，一定要加上这行
import SwiperCore, { Autoplay } from "swiper";
SwiperCore.use([Autoplay]);

      swiperOptions2: {
        slidesPerView: "auto",
        loop: true,
        speed: 1500,
        direction: "horizontal",
        spaceBetween: 10,
        autoplay: true,
        disableOnInteraction: false,
        stopOnLastSlide: false,
        autoplay: {
          delay: 0,
          reverseDirection: true, // 相反的運行
          pauseOnMouseEnter: true,
          stopOnLastSlide: false, // 是否到最后一张轮播就停止循环
          disableOnInteraction: false,
        },

    .swiper-wrap {
      width: 100%;
      overflow: hidden;
      ::v-deep .swiper-wrapper {
        .swiper-slide {
          width: auto;
        }
        /* 这个属性必须加上 */
        transition-timing-function: linear !important;
      }
    }