All Projects β†’ gs-shop β†’ Vue Slick Carousel

gs-shop / Vue Slick Carousel

Licence: other
πŸš₯Vue Slick Carousel with True SSR Written for ⚑Faster Luxstay

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Slick Carousel

Vue Gallery
πŸ“· Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Stars: ✭ 405 (-9.4%)
Mutual labels:  nuxt, slider, carousel, vue-component
Vue Awesome Swiper
πŸ† Swiper component for @vuejs
Stars: ✭ 12,072 (+2600.67%)
Mutual labels:  slider, vue-component, swiper, ssr
Hackernews
HackerNews clone built with Nuxt.js
Stars: ✭ 758 (+69.57%)
Mutual labels:  nuxt, pwa, ssr
Veluxi Starter
Veluxi Vue.js Starter Project with Nuxt JS and Vuetify
Stars: ✭ 39 (-91.28%)
Mutual labels:  nuxt, carousel, ssr
Wp Nuxt
The module adds WP-API to your nuxt application.
Stars: ✭ 179 (-59.96%)
Mutual labels:  nuxt, frontend, ssr
React Native Swiper Flatlist
πŸ‘† Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox
Stars: ✭ 217 (-51.45%)
Mutual labels:  slider, carousel, swiper
Nuepress
πŸ“– Nuxt.js + WordPress REST API
Stars: ✭ 524 (+17.23%)
Mutual labels:  nuxt, frontend, ssr
Vue Storefront
The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total coverage is just a matter of time. The API approach also allows you to merge VSF with any third-party tool like CMS, payment gateways or analytics. Ne…
Stars: ✭ 9,111 (+1938.26%)
Mutual labels:  nuxt, frontend, pwa
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+6503.8%)
Mutual labels:  slider, carousel, swiper
vue-splide
The Splide component for Vue.
Stars: ✭ 257 (-42.51%)
Mutual labels:  slider, carousel, vue-component
Vue Agile
🎠 A carousel component for Vue.js
Stars: ✭ 1,167 (+161.07%)
Mutual labels:  slick, carousel, vue-component
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+4394.41%)
Mutual labels:  vue-component, pwa, ssr
Vuetify Swipeout
πŸ‘† A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-73.83%)
Mutual labels:  slider, swiper, pwa
Awes Io
Awes.io // boilerplate based on Vue, Nuxt, TailwindCSS plus Laravel as a backend. 🀟
Stars: ✭ 599 (+34%)
Mutual labels:  nuxt, pwa, ssr
Tiny Swiper
Ingenious JavaScript Carousel powered by wonderful plugins. Lightweight yet extensible. Import plugins as needed, No more, no less.
Stars: ✭ 1,061 (+137.36%)
Mutual labels:  slider, carousel, swiper
Laravel Vuejs.com
Laravel and VueJs Blog, using Laravel nova, GraphQL, NuxtJs, Apollo and ...more
Stars: ✭ 54 (-87.92%)
Mutual labels:  nuxt, pwa, ssr
Nuxt Wordpress Pwa
Wordpress + Vue + Nuxt.js
Stars: ✭ 251 (-43.85%)
Mutual labels:  nuxt, pwa, ssr
pinar
πŸŒ²β˜€οΈ Customizable, lightweight React Native carousel component with accessibility support.
Stars: ✭ 214 (-52.13%)
Mutual labels:  slider, carousel, swiper
jooger.me
πŸ‘ My personal website,powered by @nuxt
Stars: ✭ 39 (-91.28%)
Mutual labels:  ssr, nuxt, vue-component
Frontend Tech List
πŸ“ Frontend Tech List for Developers πŸ’‘
Stars: ✭ 2,901 (+548.99%)
Mutual labels:  frontend, pwa

vue-slick-carousel

πŸš₯ Vue Slick Carousel with True SSR Written for Faster Luxstay. This Is a Port of react-slick.

npm version bit license PRs welcome code with hearth by GSShop hearth for Luxstay semantic-release Gitmoji


🎨 Features

simple center mode multiple rows
01 simple 02 center mode 03 multiple 04 multiple rows
variable width vertical lazy load synced sliders
05 variable width 06 vertical mode 07 lazy loading 08 synced sliders

vue-slick-carousel inherits the long-loved slick-carousel features, offers a variety of functions. It has been completely rewritten as a vue component. If you were trying to use the slick-carousel in the vue, it would be a perfect choice. You can use it in a vue component manner without any disparity. It also makes it easy to solve difficult problems such as custom arrows/dots.

Find out all available features on setting props and see how that works on examples.


True SSR

no-ssr-slick vue-slick-carousel
image image
FCP: 1920ms & LCP: 3090ms FCP: 620ms & LCP: 1850ms

It is designed to support SSR from the start. vue-slick-carousel supports true SSR. No more no-ssr or client-only to make it work anyway. If you value website performance, you are in the right place.

Here're nuxt examples for you to test yourself: no-ssr-slick vs vue-slick-carousel

Find out how fast it is compared to the Top 5 carousels. And leave what you think.


🚚 Installation

yarn/npm/bit

# npm
npm i vue-slick-carousel
# yarn
yarn add vue-slick-carousel
# bit
bit import gsshop.vue-slick-carousel/vue-slick-carousel

cdn

# latest
https://unpkg.com/vue-slick-carousel

πŸš€ Quick Start

See API & Examples to learn advanced usage.

<template>
  <div>
    <VueSlickCarousel :arrows="true" :dots="true">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </VueSlickCarousel>
  </div>
</template>

<script>
  import VueSlickCarousel from 'vue-slick-carousel'
  import 'vue-slick-carousel/dist/vue-slick-carousel.css'
  // optional style for arrows & dots
  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

  export default {
    name: 'MyComponent',
    components: { VueSlickCarousel },
  }
</script>

πŸ“š Docs


πŸ”– License

This software is licensed under the MIT.

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