Three ways to implement a carousel in NuxtJS

Divine Orji

A slideshow of images, known as an image carousel, is generally found on a website's homepage or an e-commerce product page. It enables several pieces of media content to occupy the same area on a page, giving equal importance to each of them.

This article will explore three ways to implement an image carousel using NuxtJS. While you can get your images from any source, for this tutorial, you will store and deliver your images using Cloudinary.

NuxtJS is an open-source framework that enhances the capabilities of VueJS with features such as fast server-side rendering, pre-configurations, and a large ecosystem of modules. All these provide an excellent developer experience.

CodeSandbox & GitHub repo

Click the CodeSandbox link below to view a complete demo of this article

https://codesandbox.io/embed/nuxt-image-carousel-iu2lsp?fontsize=14&hidenavigation=1&theme=dark

To view its source code on GitHub, click here.

Prerequisites

To understand the concepts presented in this article, a good knowledge of JavaScript and Vuejs is required. Experience with NuxtJS is not strictly required, but it will be preferred. Create a free Cloudinary account to store, manipulate and deliver your images.

Setting up the project

To create a new project, navigate to your preferred folder and run the code below in your terminal:

1npx create-nuxt-app nuxt-image-carousel

The terminal will present you with a series of prompts. Follow the recommended options below:

On successful setup, open the project in your preferred code editor, and run the terminal command below:

1yarn dev

This will serve the project with a hot reload development server on localhost:3000 accessible on your browser.

Image carousel with Bootstrap Vue

Bootstrap Vue is a component library based on the popular Bootstrap framework, optimized for Vue.js websites and apps.

Installation and setup In your project’s terminal, install bootstrap-vue by running the command below:

1yarn add bootstrap-vue

In your nuxt.config.js file, add bootstrap-vue to the modules section:

1// nuxt.config.js
2export default {
3  // Modules: https://go.nuxtjs.dev/config-modules
4  modules: [
5    'bootstrap-vue/nuxt'
6  ]
7}

This will give you access to bootstrap.css and bootstrap-vue.css

Implementation Navigate to your components/ folder, create a FirstDemo/ folder with an index.vue file having the following content.

1<template>
2  <div style="width: 100%; max-width: 800px; margin: 20px auto">
3    <h1>First Demo - Bootstrap Vue</h1>
4    <b-carousel
5      :interval="0" controls indicators img-width="1024"
6      img-height="480" background="#ababab"
7    >
8      <b-carousel-slide
9        img-src="https://res.cloudinary.com/dpkreativ/image/upload/b_auto,c_mpad,h_480,w_1024/v1646483551/wallpapers/car.jpg"
10      ></b-carousel-slide>
11      <b-carousel-slide
12        img-src="https://res.cloudinary.com/dpkreativ/image/upload/b_auto,c_mpad,h_480,w_1024/v1646695756/wallpapers/laptop.jpg"
13      ></b-carousel-slide>
14      <b-carousel-slide
15        img-src="https://res.cloudinary.com/dpkreativ/image/upload/b_auto,c_mpad,h_480,w_1024/v1646696065/wallpapers/conversation.jpg"
16      ></b-carousel-slide>
17    </b-carousel>
18  </div>
19</template>
20

21<script>
22export default {
23  name: 'FirstDemo',
24}
25</script>

In the code above:

  • You created a <div> with a max width of 800px and margin: 20px auto to space it out.
  • <b-carousel> is the carousel component provided by bootstrap-vue. It wraps the carousel slides and provides custom attributes for setting up the carousel.
  • You set :interval to 0, added controls, and specified an image width and height. These settings will be applied to each slide in the carousel automatically.
  • <b-carousel-slide> represents each individual slide. It contains an img-src with a Cloudinary image URL. In each image URL, you added b_auto,c_mpad,h_480,w_1024 Cloudinary transformations to programmatically set the size of the image to match the carousel.

To view your carousel, navigate to pages/index.vue and update <template> with the code below:

1<template>
2  <div>
3    <FirstDemo />
4  </div>
5</template>

Here’s the result:

Go through their official documentation for more information on how you can implement carousels with Bootstrap Vue.

Image carousel with Vue Awesome Swiper

Vue Awesome Swiper is a carousel component based on Swiper.js written specifically for Vue.js. It has inbuilt support for desktop and mobile Single Page Applications (SPAs) and Server-side rendering (SSR).

Installation and setup In your project’s terminal, run the command below to install Vue Awesome Swiper:

1yarn add swiper@5.x vue-awesome-swiper

This also installs swiper5, the version of Swiper.js compatible with vue-awesome-swiper.

In your nuxt.config.js file, update css: [] with the code below:

1// nuxt.config.js
2export default {
3  css: [
4    'swiper/css/swiper.css'
5  ]
6}

This will make Swiper’s CSS file available globally.

Implementation Navigate to your components/ folder and create a SecondDemo/ folder with an index.vue file containing the code below:

1<template>
2  <div style="width: 100%; max-width: 800px; margin: 20px auto">
3    <h1>Second Demo - Vue Awesome Swiper</h1>
4  </div>
5</template>
6

7<script>
8import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
9

10export default {
11  name: 'SecondDemo',
12  components: {
13    Swiper,
14    SwiperSlide,
15  },
16

17  data() {
18    return {
19      swiperOption: {
20        slidesPerView: 1,
21        spaceBetween: 20,
22        loop: true,
23        pagination: {
24          el: '.swiper-pagination',
25          clickable: true,
26        },
27        navigation: {
28          nextEl: '.swiper-button-next',
29          prevEl: '.swiper-button-prev',
30        },
31      },
32    }
33  },
34}
35</script>

In the code above:

  • Your <template> has some boilerplate code to identify the demo you’re currently working on.
  • You imported Vue Awesome Swiper’s default components; Swiper (the carousel wrapper) and SwiperSlide (the carousel items).
  • data() contains some component APIs you can apply to your carousel. You specified that the carousel should show only one slide per view, have pagination, and be on an infinite loop.

Now, update <template> portion above with the code below to display the slider on the browser:

1<template>
2  <div style="width: 100%; max-width: 800px; margin: 20px auto">
3    <h1>Second Demo - Vue Awesome Swiper</h1>
4    <swiper class="swiper" :options="swiperOption">
5      <swiper-slide>
6        <img
7          src="https://res.cloudinary.com/dpkreativ/image/upload/v1646483551/wallpapers/car.jpg"
8          alt="car"
9        />
10      </swiper-slide>
11      <swiper-slide>
12        <img
13          src="https://res.cloudinary.com/dpkreativ/image/upload/v1646695756/wallpapers/laptop.jpg"
14          alt="laptop"
15        />
16      </swiper-slide>
17      <swiper-slide>
18        <img
19          src="https://res.cloudinary.com/dpkreativ/image/upload/v1646749176/wallpapers/photo-1646727002357-073c182015e0_qv2xlg.jpg"
20          alt="mist"
21        />
22      </swiper-slide>
23      <div class="swiper-pagination" slot="pagination"></div>
24      <div class="swiper-button-prev" slot="button-prev"></div>
25      <div class="swiper-button-next" slot="button-next"></div>
26    </swiper>
27  </div>
28</template>

In this code:

  • You wrapped your carousel with a <swiper> component. :options takes in your specified component APIs from sliderOptions and applies it to the carousel
  • Your <swiper> component contains a few <swiper-slide> elements, each of which contains an image for your carousel.

To view your carousel, navigate to pages/index.vue and update <template> with the code below:

1<template>
2  <div>
3    <SecondDemo />
4  </div>
5</template>

Here’s the result:

To explore Vue Awesome Swiper in-depth, check out its official documentation.

Image carousel with Vue Slick Carousel

Vue Slick Carousel is a Vuejs implementation of the original Slick Carousel. It comes with built-in support for SSR and offers a variety of functions like lazy loading, variable width, and vertical sliders.

Installation and setup To install Vue Slick Carousel, run the command below in your terminal:

1yarn add vue-slick-carousel

In your nuxt.config.js file, update css: [] with the code below:

1// nuxt.config.js
2export default {
3  css: [
4    'vue-slick-carousel/dist/vue-slick-carousel.css',
5    'vue-slick-carousel/dist/vue-slick-carousel-theme.css',
6  ]
7}

This will add the CSS files for Vue Slick Carousel globally.

Implementation Navigate to your components/ folder and create a ThirdDemo/ folder with an index.vue file containing the code below:

1<template>
2  <div style="width: 100%; max-width: 800px; margin: 20px auto">
3    <h1>Third Demo - Vue Slick Carousel</h1>
4  </div>
5</template>
6

7<script>
8import VueSlickCarousel from 'vue-slick-carousel'
9export default {
10  name: 'ThirdDemo',
11  components: {
12    VueSlickCarousel,
13  },
14  data() {
15    return {
16      slickOptions: {
17        slidesToShow: 1,
18      },
19    }
20  },
21}
22</script>
23

24<style>
25.slick-next:before,
26.slick-prev:before {
27  color: black;
28}
29</style>

In the code above:

  • You imported VueSlickCarousel and made it available as a component.
  • You set slickOptions to contain some component APIs for your carousel.
  • You set the styling for the next and prev buttons on your carousel.

To see how this implementation works on your browser, update <template> portion above with the code below:

1<template>
2  <div style="width: 100%; max-width: 800px; margin: 20px auto">
3    <h1>Third Demo - Vue Slick Carousel</h1>
4    <!-- Implementation -->
5    <div>
6      <VueSlickCarousel v-bind="slickOptions">
7        <div>
8          <img
9            src="https://res.cloudinary.com/dpkreativ/image/upload/v1646483551/wallpapers/car.jpg"
10            alt="car"
11          />
12        </div>
13        <div>
14          <img
15            src="https://res.cloudinary.com/dpkreativ/image/upload/v1646695756/wallpapers/laptop.jpg"
16            alt="laptop"
17          />
18        </div>
19        <div>
20          <img
21            src="https://res.cloudinary.com/dpkreativ/image/upload/v1646749176/wallpapers/photo-1646727002357-073c182015e0_qv2xlg.jpg"
22            alt="mist"
23          />
24        </div>
25      </VueSlickCarousel>
26    </div>
27  </div>
28</template>

In this code, <VueSlickCarousel> contains v-bind=``"``slickOptions``" as its parameter, which makes use of the component APIs in your <script>.

To view your carousel, navigate to pages/index.vue and update <template> with the code below:

1<template>
2  <div>
3    <SecondDemo />
4  </div>
5</template>

Here’s the result:

You can explore all the component APIs available in Vue Slick Carousel from its documentation.

Conclusion

In this article, you discovered three ways to implement a carousel in your Nuxt project. You can further explore various customizations available to each carousel.

Resources

Divine Orji

Software Engineer and Technical Writer

I am a software engineer passionate about building fast, scalable apps with beautiful user interfaces.