vue使用swiper实现中间大两边小的轮播图效果

2024-09-29 21:08:26

项目中使用的vue，刚好有需求要实现轮播图，突出显示当前图片，两边展示其他图片；通过查各种资料，实现了，故在此记录下来

下面我们来看下实现步骤：

第一步：首先在项目index.html中引入swiper的css文件- swiper.min.css
第二部：写入dom结构

<div class="swiper-container">
 <div class="swiper-wrapper">
  <div
   v-for="(item, i) in pictures"
   :key="i"
   class="swiper-slide"
  >
   <!-- 具体内容 -->
   <img
    :src="item.advertiseImages"
    alt="商品图片"
   >
  </div>
 </div>
</div>

第三步：在项目中使用npm安装swiper模块

npm install swiper --save-dev

JS中文网 - 前端进阶资源教程www.javascriptC.com 一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容

第四步：在vue文件中引入，并初始化swiper；先引入swiper

import Swiper from "swiper";

注意初始化需要放入mounted钩子中哦

import Swiper from "swiper";

export default {
 data() {
 return {
 }
 },
 mounted() {
 var mySwiper = new Swiper(".swiper-container", {
   direction: "horizontal",
   loop: false,
   slidesPerView: "auto",
   centeredSlides: true,
   spaceBetween: 20,
   observer: true,
   observeParents: true
 });
 }
}

如果你的项目中，图片是从后台接口获取，那么上面的初始化可能会出问题，这个时候我们采取另外的方式初始化swiper

import Swiper from "swiper";

export default {
 data() {
 return {
  mySwiper: null
 }
 },
 methods: {
 getdata() {
  promise.then(res => {
  this.pictures = res.images || [];
  this.$nextTick(() => {
   this.initSwiper();
  });
  });
 },
 initSwiper() {
   this.mySwiper = new Swiper(".swiper-container", {
    direction: "horizontal",
     loop: false,
     slidesPerView: "auto",
     centeredSlides: true,
     spaceBetween: 20,
     observer: true,
     observeParents: true
   });
   }
 }
}

把swiper的初始化放入vue的nextTick中执行，就解决掉问题啦

第五步：如果想获取当前滚动到哪一张图片怎么办呢

this.mySwiper.activeIndex;

使用activeIndex属性就可以获取到当前图片的索引啦。那么我们这个功能就完成啦

总结

以上所述是小编给大家介绍的vue使用swiper实现中间大两边小的轮播图效果，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

Vue框架里使用Swiper的方法示例

下载swiper 首先使用npm 或者cnpm下载swiper cnpm install swiper 引入swiper import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 使用swiper <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swi
基于vue.js轮播组件vue-awesome-swiper实现轮播图

一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u
分享vue里swiper的一些坑

实例: 错误(无法显示出分页器按钮,此功能不适用与for循环出来的图片,只有当该页面图片固定几张时能正常用) 第一步: 安装 npm i swiper (vue插件自带) 第二步: 在当前页面里引入 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 第三步:当然呐,或许你在想内容呐,别急,为了大家的方便内容的写法我也会提供 <html代码> <div class="swiper-cont
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题使用下面的方法可以解决(保证在数据请求之后再渲染页面) 页面结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide tpOne" v-if="topInfo"> <-- 此处为绑
vue轮播图插件vue-awesome-swiper的使用代码实例

最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,个人感觉还是比较强大的,swiper官网中的API及配置均可使用(支持3.0),以下说下使用该插件的一些步骤: 第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesom
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题

前几天在工作的过程中,在数据渲染的时候,发生了swiper那一部分的轮播图不在滚动,手动滑动也没有效果.一直感觉数据开始渲染,是不是数据渲染的时候,并没有生成swiper的节点呢.后来第一感觉就是把控制swiper轮播的函数放在初始化事件中去, 放在初始化事件中去: 结果并没有达到自己的理想状况,后来放在数据获取之后哪里在进行轮播事件的发生, swiper终于可以滑动了.其实这也不能算是一个什么大的问题点,只是单纯的想记录一下.以后在遇到相似的问题,更多的应该是从数据实现的先后来出发.这次就当做
vue中引用swiper轮播插件的教程详解

有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div
vue轮播图插件vue-awesome-swiper

Vue-Awesome-Swiper 轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,SPA和SSR. 例子例子安装设置安装Install vue-awesome-swiper npm install vue-awesome-swiper --save vue挂载 // import import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // or require var
vue使用swiper实现中间大两边小的轮播图效果

项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swiper的css文件- swiper.min.css 第二部:写入dom结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div v-for="(item,
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例

本文实例讲述了微信小程序非swiper组件实现的自定义伪3D轮播图效果.分享给大家供大家参考,具体如下: 效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一个设置到右边,后面所有设置到最右边 2.当前点击的div(view)如果前面无内容,即第一个,那么,当前div(view)设置到中间,后面一个设置到右边,后面所有设置到最右边 3.当前点击的di
微信小程序实现的3d轮播图效果示例【基于swiper组件】

本文实例讲述了微信小程序实现的3d轮播图效果.分享给大家供大家参考,具体如下: 前面写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'> <swiper-item wx:f
微信小程序实现3D轮播图效果（非swiper组件）

本文实例为大家分享了微信小程序实现3D轮播图效果的具体代码,供大家参考,具体内容如下首先上一下效果图: 在做的时候首先想到的是用swiper组件但是发现swiper组件放进去图片的时候会没有3d的效果,原因是swiper组件自带的style属性限制了3d效果所需要的属性,所以单独写了一个组件. index.html <view class='page-con'> rotate.wxml <view class='stage'> <view class='wrapper' b
微信小程序实现Swiper轮播图效果

本文实例为大家分享了微信小程序轮播图的具体代码,供大家参考,具体内容如下 1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图配置*/ imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_s
微信小程序轮播图swiper代码详解

微信小程序自定义swiper 滑块视图容器.其中只可放置swiper-item组件,否则会导致未定义的行为. 先在index.wxml中写 style="background:{{item}}" 报错不要管,不影响页面布局 <view class="container"> <swiper class="swiper1" indicator-dots="{{indicatorDots}}" 是否显示面板指示点
JS中Swiper的使用和轮播图效果

Swiper是移动端的一款非常强大的触摸滑动插件,下面代码只展示一些常用的配置,具体可以查看官网api <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper.min.cs
Swiper实现轮播图效果

本文实例为大家分享了Swiper实现轮播图效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width
vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）

1.效果图如下 2.vue代码如下 <el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in it
vue仿携程轮播图效果(滑动轮播,下方高度自适应)

先看案例,使用vue+swiper实现,slide不同高度时,动态计算盒子高度,让其下方高度自适应的效果首先搭建vue项目,这里不做过多说明,然后安装swiper npm install swiper --save-dev 1. js部分:初始化swiper组件,vue要在mounted生命周期中进行初始化,代码如下: import Swiper from 'swiper' import { TweenMax, Power2 } from 'gsap' 初始化时调用resize函数,计算屏幕容

vue使用swiper实现中间大两边小的轮播图效果

相关推荐

随机推荐