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.js2export default {3 // Modules: https://go.nuxtjs.dev/config-modules4 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-carousel5 :interval="0" controls indicators img-width="1024"6 img-height="480" background="#ababab"7 >8 <b-carousel-slide9 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-slide12 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-slide15 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>2021<script>22export default {23 name: 'FirstDemo',24}25</script>
In the code above:
- You created a
<div>
with a max width of800px
andmargin: 20px auto
to space it out. <b-carousel>
is the carousel component provided bybootstrap-vue
. It wraps the carousel slides and provides custom attributes for setting up the carousel.- You set
:interval
to0
, addedcontrols
, 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 animg-src
with a Cloudinary image URL. In each image URL, you addedb_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.js2export 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>67<script>8import { Swiper, SwiperSlide } from 'vue-awesome-swiper'910export default {11 name: 'SecondDemo',12 components: {13 Swiper,14 SwiperSlide,15 },1617 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) andSwiperSlide
(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 <img7 src="https://res.cloudinary.com/dpkreativ/image/upload/v1646483551/wallpapers/car.jpg"8 alt="car"9 />10 </swiper-slide>11 <swiper-slide>12 <img13 src="https://res.cloudinary.com/dpkreativ/image/upload/v1646695756/wallpapers/laptop.jpg"14 alt="laptop"15 />16 </swiper-slide>17 <swiper-slide>18 <img19 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 fromsliderOptions
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.js2export 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>67<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>2324<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
andprev
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 <img9 src="https://res.cloudinary.com/dpkreativ/image/upload/v1646483551/wallpapers/car.jpg"10 alt="car"11 />12 </div>13 <div>14 <img15 src="https://res.cloudinary.com/dpkreativ/image/upload/v1646695756/wallpapers/laptop.jpg"16 alt="laptop"17 />18 </div>19 <div>20 <img21 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.