DEV Community

Vue.js Carousels: SSR Support And Performance

KyuWoo Choi on January 20, 2020

Web Performance Optimization I am one of the CoE members in GSShop. Our company invests startups, and I help them to grow. Last time, I ...

Read full post

DreaMinder • Jan 26 '20

Hooper would win here, especially after testing bundle size.

Farzad Soltani • Jan 30 '20

Hooper FTW!

runxc1(Bret Ferrier) • Jul 28 '21

Isn't Hooper only Vue2 with no plans to upgrade to Vue3?

DreaMinder • Jul 29 '21

Yes but no. The main contributor is already building something simillar to hooper for Vue3 - github.com/ismail9k/vue3-carousel

Boian Ivanov • Jan 21 '20

Really liked the detailed article on what's the best way to implement an SSR carousel in Vue. Although since I've been through those hoops already, I would recommend a more Vue + CSS approach. Buefy has a really easy-to-use component for carousels that was added quite recently that you could potentially check out. But that's if you are going to use Bulma as your CSS framework of choice. Otherwise the article is quite on point. Good job !

KyuWoo Choi • Jan 22 '20 • Edited

You're right. It's better not to use 3rd party libraries at all as it's overhead. If the carousels provided by the UI frameworks work for you, that's it. But the carousels listed above offer rich features. And only in such cases you should take the carousels above. Because It's smarter to use rather than try to implement that.

Stefano • Feb 4 '20 • Edited

I don't know why, but i can't manage to make it work. The slide is vertical and the slides are one on top of the others! I made a blank project to test it and is still broken:

<template>
  <div>
      <VueSlickCarousel v-bind="carouselSettings">
        <div><h1>Test1</h1></div>
        <div><h1>Test2</h1></div>
        <div><h1>Test3</h1></div>
      </VueSlickCarousel>
  </div>
</template>

<script>

  import VueSlickCarousel from 'vue-slick-carousel'
  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'


export default {
  components: {
      VueSlickCarousel
  },
  data(){
    return{
      carouselSettings:{
        "dots": true,
        "focusOnSelect": true,
        "infinite": true,
        "speed": 500,
        "slidesToShow": 3,
        "slidesToScroll": 3,
        "touchThreshold": 5
      }
    }
  }
}

<style scoped>
h1{
   background-color:red
}