{"id":27787,"date":"2022-03-24T19:51:57","date_gmt":"2022-03-24T19:51:57","guid":{"rendered":"http:\/\/three-ways-to-implement-a-carousel-in-nuxtjs"},"modified":"2025-10-30T10:41:18","modified_gmt":"2025-10-30T17:41:18","slug":"three-ways-to-implement-a-carousel-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/three-ways-to-implement-a-carousel-in-nuxtjs\/","title":{"rendered":"NuxtJS Carousel | How to Implement a Carousel in NuxtJS"},"content":{"rendered":"

\nCarousels, also known as image sliders or slideshows, play a vital role in enhancing the user interface of websites. They allow multiple pieces of content to be displayed in a limited space, typically cycling through images, text, or other HTML elements.\n<\/p>\n

\nNuxt.js is a powerful and versatile framework that provides various ways to integrate carousels into your websites. While its main strength lies in crafting Vue.js applications, it offers flexibility in the components and modules you can use. \n<\/p>\n

This article will explore three ways to implement a NuxtJS carousel. While you can get your images from any source, for this tutorial, you will store and deliver your images using Cloudinary. So to learn how to set up a Nuxt carousel slider here you aren\u2019t required to use Cloudinary, but it makes it easier when you handle your images in Cloudinary. If you\u2019re not using Cloudinary, you can sign up for free for life.<\/p>\n

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.<\/p>\n

CodeSandbox and GitHub repo<\/h2>\n

Click the link in the CodeSandbox below to view a complete demo of this article:<\/p>\n

https:\/\/codesandbox.io\/embed\/nuxt-image-carousel-iu2lsp?fontsize=14&hidenavigation=1&theme=dark<\/a><\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

To view its source code on GitHub, click here<\/a>.<\/p>\n

Prerequisites<\/h2>\n

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-for-life account at Cloudinary<\/a> to store, manipulate and deliver your images.<\/p>\n

Setting Up the Nuxt Carousel Slider Project<\/h2>\n

To create a new project, navigate to your preferred folder and run the code below in your terminal:<\/p>\n

npx create-nuxt-app nuxt-image-carousel\n<\/code><\/pre>\n
The terminal will present you with a series of prompts. Follow the recommended options below:<\/p>\n
\"Screenshot<\/p>\n
On successful setup, open the project in your preferred code editor, and run the terminal command below:<\/p>\n
 yarn dev\n<\/code><\/pre>\n
This will serve the project with a hot reload development server on localhost:3000 accessible on your browser.<\/p>\n
NuxtJS Carousel Example 1: Bootstrap Vue<\/h2>\n
Bootstra<\/a>p<\/a> Vue<\/a> is a component library based on the popular Bootstrap framework, optimized for Vue.js websites and apps.<\/p>\n
Installation and setup<\/strong>\nIn your project\u2019s terminal, install bootstrap-vue<\/code> by running the command below:<\/p>\n
yarn add bootstrap-vue\n<\/code><\/pre>\n
In your nuxt.config.js<\/code> file, add bootstrap-vue<\/code> to the modules section:<\/p>\n
\/\/ nuxt.config.js\nexport default {\n  \/\/ Modules: https:\/\/go.nuxtjs.dev\/config-modules\n  modules: [\n    'bootstrap-vue\/nuxt'\n  ]\n}\n<\/code><\/pre>\n
This will give you access to bootstrap.css<\/code> and bootstrap-vue.css<\/code><\/p>\n
Implementation<\/strong>\nNavigate to your components\/<\/code> folder, create a FirstDemo\/<\/code> folder with an index.vue<\/code> file having the following content.<\/p>\n
<template>\n  <div style="width: 100%; max-width: 800px; margin: 20px auto">\n    <h1>First Demo - Bootstrap Vue<\/h1>\n    <b-carousel\n      :interval="0" controls indicators img-width="1024"\n      img-height="480" background="#ababab"\n    >\n      <b-carousel-slide\n        img-src="https:\/\/res.cloudinary.com\/dpkreativ\/image\/upload\/b_auto,c_mpad,h_480,w_1024\/v1646483551\/wallpapers\/car.jpg"\n      ><\/b-carousel-slide>\n      <b-carousel-slide\n        img-src="https:\/\/res.cloudinary.com\/dpkreativ\/image\/upload\/b_auto,c_mpad,h_480,w_1024\/v1646695756\/wallpapers\/laptop.jpg"\n      ><\/b-carousel-slide>\n      <b-carousel-slide\n        img-src="https:\/\/res.cloudinary.com\/dpkreativ\/image\/upload\/b_auto,c_mpad,h_480,w_1024\/v1646696065\/wallpapers\/conversation.jpg"\n      ><\/b-carousel-slide>\n    <\/b-carousel>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  name: 'FirstDemo',\n}\n<\/script>\n<\/code><\/pre>\n
In the code above:<\/p>\n