zwhGithub / Vue Swiper
✅ 轻量、高性能轮播插件。目前支持 无缝衔接自动轮播、无限轮播、手势轮播
Stars: ✭ 548
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Swiper
Vue Slick Carousel
🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
Stars: ✭ 447 (-18.43%)
Mutual labels: slider, swiper
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+2102.92%)
Mutual labels: slider, swiper
Vue Swipe Mobile
😃 A siwpe (touch slider) component for Vue2
Stars: ✭ 97 (-82.3%)
Mutual labels: slider, swiper
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-78.65%)
Mutual labels: slider, swiper
vue-active-swiper
🌴 A Mobile-oriented、No dependencies、Lightweight Swiper component for Vue
Stars: ✭ 33 (-93.98%)
Mutual labels: slider, swiper
Tiny Swiper
Ingenious JavaScript Carousel powered by wonderful plugins. Lightweight yet extensible. Import plugins as needed, No more, no less.
Stars: ✭ 1,061 (+93.61%)
Mutual labels: slider, swiper
React Native Web Swiper
Swiper-Slider for React-Native and React-Native-Web
Stars: ✭ 125 (-77.19%)
Mutual labels: slider, swiper
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+5286.68%)
Mutual labels: slider, swiper
React Native Swiper Flatlist
👆 Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox
Stars: ✭ 217 (-60.4%)
Mutual labels: slider, swiper
Vue Plain Slider
A simple slider component for Vue.js
Stars: ✭ 146 (-73.36%)
Mutual labels: slider, swiper
RN-intro-screen
Usage of intro / welcome screen in react-native as onboarding slider swiper
Stars: ✭ 15 (-97.26%)
Mutual labels: slider, swiper
pinar
🌲☀️ Customizable, lightweight React Native carousel component with accessibility support.
Stars: ✭ 214 (-60.95%)
Mutual labels: slider, swiper
React Smooth Range Input
🎚 React beautiful input range slider
Stars: ✭ 356 (-35.04%)
Mutual labels: slider
Discreteslider
A slider (SeekBar) with amazing value label.
Stars: ✭ 351 (-35.95%)
Mutual labels: slider
Vue Flickity
A Vue Slider / Carousel Component for Flickity.js
Stars: ✭ 339 (-38.14%)
Mutual labels: slider
vue-swiper
- 基于 Vue2.0 开发,基本满足大部分功能。
- 轻量、高性能轮播插件。目前支持 无缝衔接自动轮播、无限轮播、手势轮播。
- 没有引入第三方库,原生 js 封装,打包之后只有 8.2KB 大小 性能还是杠杠滴。
github地址
demo
🎉 觉得好用给一个 star 哦~ 🎉
Install
npm i vue-swiper-component --save
cnpm i vue-swiper-component --save //国内镜像
Usage
import { Swiper, Slide } from 'vue-swiper-component';
components: {
Swiper,
Slide
}
//异步加载轮播图的情况;
<Swiper v-if="list.length > 0">
<Slide v-for="(item,index) in list" :key="index">
</Slide>
</Swiper>
//同步加载轮播图情况
<Swiper>
<Slide>
1
</Slide>
<Slide>
2
</Slide>
<Slide>
3
</Slide>
</Swiper>
//加一些参数配置情况
<Swiper v-if="slidesReal.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500">
<Slide @click="clickMe" v-for="(item,index) in slidesReal" :key="index">
//添加click事件
</Slide>
</Swiper>
API
属性 | 说明 | 默认 |
---|---|---|
autoPlay | 是否自动轮播 | true |
showIndicator | 是否显示轮播的那个点 | true |
interval | 每两次隔多久滚动一次 | 2500 |
duration | 每次滚动一页需要多久时间 | 500 |
✅ Swiper 上面还暴露了其他方法,在 Swiper 标签上添加 ref 属性, 例如: <Swiper ref="swiper"></Swiper>
✅ this.$refs.swiper.prevSlide(); // 上一张图
✅ this.$refs.swiper.nextSlide(); // 下一张图
✅ this.$refs.swiper.slideTo(2); //某一张图
事件
transtionend 事件 每次轮播出发 参数表示轮播到第几个图片 在Swiper上添加
// @transtionend="getNum" getNum(data) {console.log(data);}
click 事件 每个轮播图上的事件
Other
- 可以通过覆盖我的样式进行自定义样式,Slide 标签里面可以写 div 或者其他的东西
- 一些参数配置可以参考上面 Usage 第三个示例,异步渲染要加 v-if 保证渲染成功 参考第一个示例
- 如果其他问题可以邮箱沟通,[email protected];
- 暂时对 PC 支持不是很友好,等以后有时间了可以加上;
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].