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

      <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;
      }
    }

相关推荐

  1. Vuevue2 vue-awesome-swiper 刷新无法自动滚动解决

    2024-07-20 21:06:02       15 阅读
  2. vue实现列表自动滚动效果

    2024-07-20 21:06:02       51 阅读
  3. Vuevue3中使用swipe竖直方向上滚动

    2024-07-20 21:06:02       19 阅读
  4. swiper/vue 获取 swiper实例方法

    2024-07-20 21:06:02       57 阅读
  5. vueswiper使用

    2024-07-20 21:06:02       44 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 21:06:02       52 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 21:06:02       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-20 21:06:02       45 阅读
  4. Python语言-面向对象

    2024-07-20 21:06:02       55 阅读

热门阅读

  1. 【Go系列】模块和协同开发

    2024-07-20 21:06:02       18 阅读
  2. C++中size_t怎么用

    2024-07-20 21:06:02       14 阅读
  3. Linux CAN数据收发

    2024-07-20 21:06:02       15 阅读
  4. shell + Python3 | 解析理解 gencode gtf 基因组注释文件

    2024-07-20 21:06:02       13 阅读
  5. dockerfile

    2024-07-20 21:06:02       16 阅读
  6. 一周速递|全球车联网产业动态(2024年7月21日)

    2024-07-20 21:06:02       17 阅读