All Projects → Splidejs → vue-splide

Splidejs / vue-splide

Licence: MIT license
The Splide component for Vue.

Programming Languages

typescript
32286 projects
Vue
7211 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to vue-splide

Embla Carousel
A lightweight carousel library with fluid motion and great swipe precision.
Stars: ✭ 1,874 (+629.18%)
Mutual labels:  slider, carousel, carousel-component
react-flickity-component
A React.js component for using @desandro's Flickity
Stars: ✭ 258 (+0.39%)
Mutual labels:  slider, carousel, carousel-component
v-owl-carousel
🦉 VueJS wrapper for Owl Carousel
Stars: ✭ 46 (-82.1%)
Mutual labels:  carousel, carousel-component, vue-component
Vue Gallery
📷 Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Stars: ✭ 405 (+57.59%)
Mutual labels:  slider, carousel, vue-component
pinar
🌲☀️ Customizable, lightweight React Native carousel component with accessibility support.
Stars: ✭ 214 (-16.73%)
Mutual labels:  slider, carousel, carousel-component
Vue Slick Carousel
🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
Stars: ✭ 447 (+73.93%)
Mutual labels:  slider, carousel, vue-component
React Siema
ReactSiema Demo
Stars: ✭ 90 (-64.98%)
Mutual labels:  slider, carousel
React Native Swiper Flatlist
👆 Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox
Stars: ✭ 217 (-15.56%)
Mutual labels:  slider, carousel
Vue Slider Component
🌡 A highly customized slider component
Stars: ✭ 2,158 (+739.69%)
Mutual labels:  slider, vue-component
Widget
A set of widgets based on jQuery&&javascript. 一套基于jquery或javascript的插件库 :轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等
Stars: ✭ 1,579 (+514.4%)
Mutual labels:  slider, carousel
React Soft Slider
Simple, fast and impartial slider
Stars: ✭ 54 (-78.99%)
Mutual labels:  slider, carousel
React Spring Slider
A slider component for react
Stars: ✭ 118 (-54.09%)
Mutual labels:  slider, carousel
React Flickity Component
A React.js component for using @desandro's Flickity
Stars: ✭ 232 (-9.73%)
Mutual labels:  slider, carousel
React Native Carousel View
react-native carousel, support in both Android and iOS
Stars: ✭ 70 (-72.76%)
Mutual labels:  slider, carousel
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+696.11%)
Mutual labels:  slider, carousel
React Carousel
Lightweight carousel component for react
Stars: ✭ 56 (-78.21%)
Mutual labels:  slider, carousel
Ngx Carousel
An amazing responsive carousel for angular 2+ . It have multiple options to control the carousel and also it is very simple to getstarted. Go and try this angular 2+ carousel. Getstarted available in readme file
Stars: ✭ 121 (-52.92%)
Mutual labels:  slider, carousel
Xam.plugin.simpleappintro
Just a nice and simple AppIntro for your Xamarin Forms project
Stars: ✭ 139 (-45.91%)
Mutual labels:  slider, carousel
Carousel View
CarouselView for android with showing horizontal and vertical, auto scrolling (with pause/resume), slider mode/ carousel mode options
Stars: ✭ 131 (-49.03%)
Mutual labels:  slider, carousel
Vue Glide
A slider and carousel as vue component on top of the Glide.js
Stars: ✭ 225 (-12.45%)
Mutual labels:  slider, carousel

Vue Splide

Vue Splide is the Vue component for the Splide slider/carousel.

Getting Started
Demo
Discussions

Caveat

The latest version only supports Vue 3. You have to use the old version (0.3.5) for Vue 2, but the Splide version is also outdated.

Quick Start

Get the latest version from NPM:

$ npm install @splidejs/vue-splide

Import CSS and components:

<template>
  <Splide :options="{ rewind: true }" aria-label="Vue Splide Example">
    <SplideSlide>
      <img src="image1.jpg" alt="Sample 1">
    </SplideSlide>
    <SplideSlide>
      <img src="image2.jpg" alt="Sample 2">
    </SplideSlide>
  </Splide>
</template>

<script>
import { Splide, SplideSlide } from '@splidejs/vue-splide';
import { defineComponent } from 'vue';
import '@splidejs/vue-splide/css';

export default defineComponent( {
  components: { Splide, SplideSlide },
} );
</script>

Visit here for more details.

Support Splide

Please support the project if you like it!

License

Vue Splide and Splide are released under the MIT license. © 2022 Naotoshi Fujita

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].