Swiper2 在Vue2中的使用方法

最新推荐文章于 2025-02-04 23:15:49 发布

原创最新推荐文章于 2025-02-04 23:15:49 发布 · 300 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html #前端

Swiper7将默认容器从.swiper-container更改为.swiper。在项目中，需要导入Swiper的CSS和JS文件，并在组件挂载后初始化。示例代码展示了如何设置自动滑动、循环播放、键盘控制以及导航按钮。记得更新CSS样式以适应新的容器类名。

。Swiper7的默认容器是'.swiper'，Swiper6之前是'.swiper-container'。

new Swiper(container,options)_Swiper2|Swiper中文网


<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

需要引入css和js文件

import Swiper from "swiper";
import "swiper/css/swiper.min.css";

使用时需在mounted上挂载，如果出现update

根据文档添加所需要的属性

 mounted() {
    new Swiper(".swiper-container", {
      // autoplay: 5000, //可选选项，自动滑动
      loop: true, //可选选项，开启循环
      keyboardControl: true,

      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  },

css样式给定宽高

 .swiper-wrapper {
    width: 800px;

    img {
      width: 750px;
    }
  }