swiper的基本使用

swiper是什么?

swiper是一款轻量级的轮播图插件,不仅支持pc端更是为移动端而生,用它可以快速地做出一个轮播图,或者扩展使其做出复杂的轮播效果。

基本用法

swiper使用需要两个文件,一个是swiper.css,里面规定了一些在这个滑动轮播插件中常用的样式,当然如果你愿意的话可以自己定义样式
另外一个是swiper.js这个是插件的主体部分。
这些文件可以在官网查找获取方法
在页面中引入这两个文件之后首先要写基本的html结构
下面所有的使用方式基于swiper 4.x

  <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 class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
  </div>

类名为swiper-container 是滑动轮播插件的包裹器,类似于一个mask,一个窗口,swiper-wrapper是一个按照一定顺序排列的所有轮播图的集合,在默认情况下是左右排列,当鼠标或者触屏进行操作的时候,改变的是这个元素的位置,而达到轮播的效果。swiper-slide则是每个轮播图元素,在写好基本html结构之后,需要对这个轮播图进行初始化

<script>
	var swiper = new Swiper('.swiper-container');
</script>

这样就能生成一个默认的轮播图,可以用鼠标或者触摸屏来进行左右的滑动

添加分页与导航

大部分的轮播图都有分页,导航,可以让用户看到目前是在什么位置,并且让用户知道这是一个可以交互的部分,添加分页的方式也很简单,只需要在初始化的时候添加选项指定一下分页的元素就行
html部分,在swiper-container下面添加下一个与上一个按钮

	<div class="swiper-container">
		<div class="swiper-wrapper">...</div>
		  <div class="swiper-button-next"></div>
		  <div class="swiper-button-prev"></div>
	</div>

在这里swiper-button-next和swiper-button-prev都是指定好的按钮,下一个按钮会垂直居中并且靠右边,上一个按钮会垂直居中靠右边,当然也能自己指定按钮。

	var swiper = new Swiper('.swiper-container',{
		navigation:{
			nextEl: '.swiper-button-next',
	        prevEl: '.swiper-button-prev',
		}
	});

在初始化函数中添加按钮元素。
这样就能生成一个有导航按钮的轮播图了
siwper导航
添加分页的方式和导航按钮非常类似
html:

  <div class="swiper-container">
    <div class="swiper-wrapper">
		...
    </div>
    <!-- 分页 -->
    <div class="swiper-pagination"></div>
    <!--导航按钮-->
    <div class="swiper-button-next"></div>
	<div class="swiper-button-prev"></div>
  </div>

在初始化的时候加入分页元素
js:

    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
      navigation:{
		nextEl: '.swiper-button-next',
	    prevEl: '.swiper-button-prev',
	  }
    });

这样就能生成有分页又有导航的轮播图了
有导航按钮和分页的轮播图

循环与自动轮播:

js:
在初始化的时候加入

   var swiper = new Swiper('.swiper-container', {
	   //分页
       pagination: {
           el: '.swiper-pagination',
       },
       //导航按钮
       navigation:{
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev',
       },
       //自动轮播
       autoplay: {
           delay: 2500,//时间 毫秒
           disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true 
       },
       loop:true,//循环 最后面一个往后面滑动会滑到第一个
   });

其他常用属性

  1. 分页用进度条代替
   var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            type: 'progressbar',//将分页的类型改为进度条就行
        },
        navigation:{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
    });

其他常用属性待添加。。不急慢慢来 ,反正是自己看的2333

### Vue Swiper 组件使用教程 #### 安装依赖 为了在 Vue 项目中使用 Swiper 轮播图组件,首先需要安装 `swiper` 和其对应的 Vue 封装库 `vue-awesome-swiper`。可以通过以下命令完成安装: ```bash npm install vue-awesome-swiper@3.1.3 swiper --save ``` 此操作会将指定版本的 `vue-awesome-swiper` 和核心库 `swiper` 添加到项目中[^4]。 --- #### 引入样式文件 为了让 Swiper 的功能正常运行并显示正确的样式,在项目的入口文件(通常是 `main.js`)中全局引入 Swiper 的 CSS 文件: ```javascript import 'swiper/css/swiper.css'; ``` 这样可以确保所有页面都可以访问 Swiper 提供的基础样式[^3]。 --- #### 配置 Vue 插件 接着需要注册 `vue-awesome-swiper` 作为 Vue 的插件。同样在 `main.js` 中执行如下代码: ```javascript import Vue from 'vue'; import VueAwesomeSwiper from 'vue-awesome-swiper'; // 注册插件 Vue.use(VueAwesomeSwiper); ``` 通过上述配置,可以在整个应用范围内使用 Swiper 功能。 --- #### 创建轮播图组件 创建一个新的 Vue 组件来展示 Swiper 轮播效果。以下是一个简单的例子,展示了如何设置基本参数和绑定数据源: ```html <template> <div class="swiper-container"> <!-- Swiper --> <swiper :options="swiperOption"> <swiper-slide v-for="(slide, index) in slides" :key="index"> {{ slide }} </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <!-- 分页器 --> <div class="swiper-button-prev" slot="button-prev"></div> <!-- 上一页按钮 --> <div class="swiper-button-next" slot="button-next"></div> <!-- 下一页按钮 --> </swiper> </div> </template> <script> export default { data() { return { slides: ['Slide 1', 'Slide 2', 'Slide 3'], // 数据源 swiperOption: { // Swiper 参数配置 loop: true, speed: 600, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } } }; } }; </script> <style scoped> .swiper-container { width: 100%; height: 300px; } </style> ``` 在此示例中,我们设置了循环播放 (`loop`)、切换速度 (`speed`)、分页器 (`pagination`) 和导航箭头 (`navigation`) 等选项[^1]。 --- #### 性能优化注意事项 当处理复杂的长列表或者多页面场景时,需要注意性能问题。对于移动端开发框架如 uni-app,推荐采用官方建议的方式进行优化。例如,仅缓存当前可见的三屏数据以减少 DOM 渲染压力[^5]。 ---
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值