All Projects → ismail9k → vue3-carousel

ismail9k / vue3-carousel

Licence: other
Vue 3 carousel component

Programming Languages

typescript
32286 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language
shell
77523 projects

Projects that are alternatives of or similar to vue3-carousel

MediaSliderView
Pure java based, highly customizable media slider gallery supporting both images and videos for android.
Stars: ✭ 85 (-77.57%)
Mutual labels:  slider, carousel, carousel-slider
Xam.plugin.simpleappintro
Just a nice and simple AppIntro for your Xamarin Forms project
Stars: ✭ 139 (-63.32%)
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 (-65.44%)
Mutual labels:  slider, carousel
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+439.84%)
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 (-68.07%)
Mutual labels:  slider, carousel
Widget
A set of widgets based on jQuery&&javascript. 一套基于jquery或javascript的插件库 :轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等
Stars: ✭ 1,579 (+316.62%)
Mutual labels:  slider, carousel
Vue Slider Component
🌡 A highly customized slider component
Stars: ✭ 2,158 (+469.39%)
Mutual labels:  slider, vue3
React Native Carousel View
react-native carousel, support in both Android and iOS
Stars: ✭ 70 (-81.53%)
Mutual labels:  slider, carousel
Vue Glide
A slider and carousel as vue component on top of the Glide.js
Stars: ✭ 225 (-40.63%)
Mutual labels:  slider, carousel
React Flickity Component
A React.js component for using @desandro's Flickity
Stars: ✭ 232 (-38.79%)
Mutual labels:  slider, carousel
Keen Slider
The HTML touch slider carousel with the most native feeling
Stars: ✭ 3,097 (+717.15%)
Mutual labels:  slider, carousel
React Spring Slider
A slider component for react
Stars: ✭ 118 (-68.87%)
Mutual labels:  slider, carousel
Embla Carousel
A lightweight carousel library with fluid motion and great swipe precision.
Stars: ✭ 1,874 (+394.46%)
Mutual labels:  slider, carousel
React Responsive Carousel
React.js Responsive Carousel (with Swipe)
Stars: ✭ 1,962 (+417.68%)
Mutual labels:  slider, carousel
React Siema
ReactSiema Demo
Stars: ✭ 90 (-76.25%)
Mutual labels:  slider, carousel
Svelte Carousel
A super lightweight, super simple Carousel for Svelte 3
Stars: ✭ 144 (-62.01%)
Mutual labels:  slider, carousel
React Soft Slider
Simple, fast and impartial slider
Stars: ✭ 54 (-85.75%)
Mutual labels:  slider, carousel
React Carousel
Lightweight carousel component for react
Stars: ✭ 56 (-85.22%)
Mutual labels:  slider, carousel
React Native Swiper Flatlist
👆 Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox
Stars: ✭ 217 (-42.74%)
Mutual labels:  slider, carousel
vue-splide
The Splide component for Vue.
Stars: ✭ 257 (-32.19%)
Mutual labels:  slider, carousel

Vue 3 Carousel

Modern lightweight Vue 3 carousel component

npm npm Package Quality

Documentation

https://ismail9k.github.io/vue3-carousel/

Features

  • Responsive breakpoints
  • Mouse/touch dragging
  • Infinity scroll (wrapping around)
  • Auto play
  • Add classes for active and for visible slides
  • RTL
  • Enrich a11y

Getting started

Installation

First step is to install it using yarn or npm:

npm install vue3-carousel

# or use yarn
yarn add vue3-carousel

Basic Using

<template>
  <carousel :items-to-show="1.5">
    <slide v-for="slide in 10" :key="slide">
      {{ slide }}
    </slide>

    <template #addons>
      <navigation />
      <pagination />
    </template>
  </carousel>
</template>

<script>
// If you are using PurgeCSS, make sure to whitelist the carousel CSS classes
import 'vue3-carousel/dist/carousel.css'
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'

export default {
  name: 'App',
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation,
  },
}
</script>
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].