Building an Image Carousel in JavaScript Is Now Easy!
Tags: javascript, webdev
Published: 2022-08-30 13:01:24

---
title: Building an Image Carousel in JavaScript Is Now Easy!
published: true
date: 2022-08-30 11:24:37 UTC
tags: javascript, webdev
canonical_url: https://www.syncfusion.com/blogs/post/building-an-image-carousel-in-javascript-is-now-easy.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4blgow2sh0zgg91uybr.png
---

The [JavaScript Carousel](https://www.syncfusion.com/javascript-ui-controls/js-carousel "JavaScript Carousel control") is a highly responsive and completely customizable UI control. It can display images with content, links, and more, like a slideshow. You can use it to display scrolling news headlines, featured articles on home pages, and image galleries. Now, it has been developed to meet industrial standards and is production-ready.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/JavaScript-Carousel-Control.gif" alt="JavaScript Carousel Control" style="width:100%">

  <figcaption>JavaScript Carousel Control</figcaption>

</figure>


Let’s explore the JavaScript Carousel control and its rich features with code examples.

## Overview

The Carousel control provides the flexibility to create slides and configure their look and feel. You can also enjoy web-standard functionalities like accessibility, keyboard interactions, and events.

## Key features

The key features of the JavaScript Carousel control are as follows:

- [Easy slide creation](#slide-creation)
- [Navigation buttons](#navigation-buttons)
- [Play/pause button](#play-or-pause-button)
- [Indicators](#indicators)
- [Animation and transitions](#animation-and-transitions)
- [WAI-ARIA compliance and keyboard accessibility](#wai-aria-compliance-and-keyboard-accessibility)

### <a name="slide-creation">Slide creation</a>

In the JavaScript Carousel control, you can easily create slides and design your slide content. Then, assign them to the carousel **items**  template to display them as a slideshow. Refer to the following code example.

```js
Import { Carousel } from “@syncfusion/ej2-navigations”;
 
const carouselObj = new Carousel({
 items: [
   { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/cardinal.png” alt=”cardinal” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Cardinal</figcaption></figure>’ },
   { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/hunei.png” alt=”kingfisher” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Kingfisher</figcaption></figure>’ },
   { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/costa-rica.png” alt=”keel-billed-toucan” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Keel-billed-toucan</figcaption></figure>’ },
   { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png” alt=”yellow-warbler” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Yellow-warbler</figcaption></figure>’ },
   { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/bee-eater.png” alt=”bee-eater” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Bee-eater</figcaption></figure>’ }
 ]
});
carouselObj.appendTo(“#carousel”);
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Creating-Slides-Using-JavaScript-Carousel-Control.png" alt="Creating Slides Using JavaScript Carousel Control" style="width:100%">

  <figcaption>Creating Slides Using JavaScript Carousel Control</figcaption>

</figure>


### <a name="navigation-buttons">Navigation buttons</a>

You can manually perform slide transitions with the **previous** and **next**  navigation buttons. You can show or hide the buttons using the [buttonsVisibility](https://ej2.syncfusion.com/documentation/api/carousel/#buttonsvisibility "buttonsVisibility property of JavaScript Carousel Control") property with any of the following values:

- **Hidden** : Hides the navigator buttons.
- **Visible** : Shows the navigator buttons.
- **VisibleOnHover** : Shows the navigator buttons only when the mouse is hovering over the Carousel.

Use the [template](https://ej2.syncfusion.com/documentation/carousel/navigators-and-indicators/#previous-and-next-button-template "Previous and next button template of JavaScript Carousel Control") options to customize the navigation buttons.

Refer to the following code example to show the navigator buttons on mouse hover in the Carousel control.

```js
Import { Carousel } from “@syncfusion/ej2-navigations”; 
const carouselObj: Carousel = new Carousel({  
  buttonsVisibility: “VisibleOnHover”,  
  items: [
    { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/cardinal.png” alt=”cardinal” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Cardinal</figcaption></figure>’ },
    { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/hunei.png” alt=”kingfisher” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Kingfisher</figcaption></figure>’ },
    { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/costa-rica.png” alt=”keel-billed-toucan” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Keel-billed-toucan</figcaption></figure>’ },
    { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png” alt=”yellow-warbler” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Yellow-warbler</figcaption></figure>’ },
    { template: ‘<figure class=”img-container”><img src=”https://ej2.syncfusion.com/products/images/carousel/bee-eater.png” alt=”bee-eater” style=”height:100%;width:100%;” /><figcaption class=”img-caption”>Bee-eater</figcaption></figure>’ }  
  ]});
carouselObj.appendTo(“#carousel”);
```

### <a name="play-or-pause-button">Play/pause button</a>

The play button is used to control the autoplay slide functionality. You can show or hide and customize the play button using the [showPlayButton](https://ej2.syncfusion.com/documentation/api/carousel/#showplaybutton "showPlayButton property of JavaScript Carousel Control") and [playButtonTemplate](https://ej2.syncfusion.com/javascript/documentation/api/carousel/#playbuttontemplate "playButtonTemplate property of JavaScript Carousel Control") properties, respectively.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Play-or-Pause-Button-in-JavaScript-Carousel-Control-1.png" alt="Play/Pause Button in JavaScript Carousel Control" style="width:100%">

  <figcaption>Play/Pause Button in JavaScript Carousel Control</figcaption>

</figure>



### <a name="indicators">Indicators</a>

Indicators help us depict the total number of slides and the currently active slide in the Carousel. You can show or hide the indicators using the [showIndicators](https://ej2.syncfusion.com/documentation/api/carousel/#showindicators "showIndicators property of JavaScript Carousel Control") property. Display the preview of a slide or thumbnail in the indicators using the [indicatorsTemplate](https://ej2.syncfusion.com/documentation/api/carousel/#indicatorstemplate "indicatorsTemplate property of JavaScript Carousel Control") property.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Indicators-in-JavaScript-Carousel-Control-1.png" alt="Indicators in JavaScript Carousel Control" style="width:100%">

  <figcaption>Indicators in JavaScript Carousel Control</figcaption>

</figure>




**Note:** Refer to the [template examples in the JavaScript Carousel control](https://ej2.syncfusion.com/demos/#/bootstrap5/carousel/templates.html "Template examples in the JavaScript Carousel control") for more details.

### <a name="animation-and-transitions">Animation and transitions</a>

You can enjoy hassle-free transitions while navigating among the slides with the built-in  **slide**  and  **cross-fade**  [animation](https://ej2.syncfusion.com/documentation/carousel/animations-and-transitions/ "Animations and Transitions in JavaScript Carousel control") effects.

The Carousel supports autoplay functionality, which performs slide transition after a specified or default interval. On reaching the last slide, the slides will be repeated with the selected transition by default.

You can enable or disable infinite slide transitions using the [loop](https://ej2.syncfusion.com/documentation/api/carousel/#loop "loop property of JavaScript Carousel Control") property.

You can also use the [pauseOnHover](https://ej2.syncfusion.com/documentation/api/carousel/#pauseonhover "pauseOnHover property of JavaScript Carousel Control") property to play or pause the slides when hovering the mouse pointer over the Carousel element.

#### Custom animations

Apart from the built-in slide animation effects, you can also customize the animation effects.

**Note:** For more details, refer to the [custom animation in the JavaScript Carousel](https://ej2.syncfusion.com/documentation/carousel/animations-and-transitions/#custom-animation "Custom animation in the JavaScript Carousel") documentation.

### <a name="wai-aria-compliance-and-keyboard-accessibility">WAI-ARIA compliance and keyboard accessibility</a>

The Carousel control was built based on the [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/ "ARIA Authoring Practices Guide (APG)") specifications, roles, states, and properties. It also has keyboard support. This will be helpful for people who use assistive devices.

You can easily interact with the JavaScript Carousel control using these keyboard shortcuts:
<table width="0">
<tbody>
<tr>
<td width="63"><strong>Key</strong></td>
<td width="426"><strong>Functionalities</strong></td>
</tr>
<tr>
<td width="63">Arrow keys</td>
<td width="426">Navigate between slides.</td>
</tr>
<tr>
<td width="63">Home</td>
<td width="426">Navigate to the first slide.</td>
</tr>
<tr>
<td width="63">End</td>
<td width="426">Navigate to the last slide.</td>
</tr>
<tr>
<td width="63">Space</td>
<td width="426">Play or pause the slide transitions.</td>
</tr>
<tr>
<td width="63">Enter</td>
<td width="426">Perform the respective action when in focus.</td>
</tr>
</tbody>
</table>

## Reference

For more details, refer to the [Getting started with JavaScript Carousel control documentation](https://ej2.syncfusion.com/documentation/carousel/getting-started/ "Getting started with JavaScript Carousel control documentation") and [online demos](https://ej2.syncfusion.com/demos/#/bootstrap5/carousel/default.html "JavaScript Carousel control online demos").

## Conclusion

Thanks for reading! In this blog, we have seen the key features of our [JavaScript Carousel](https://www.syncfusion.com/javascript-ui-controls/js-carousel "JavaScript Carousel control") control. The Carousel control is also available in our [Angular](https://www.syncfusion.com/angular-ui-components/angular-carousel "Angular Carousel Component"), [Blazor](https://www.syncfusion.com/blazor-components/blazor-carousel "Blazor Carousel Component"), [React](https://www.syncfusion.com/react-ui-components/react-carousel "React Carousel Component"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-carousel "Vue Carousel Component"), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/carousel "ASP.NET Core Carousel Control") and [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/carousel "ASP.NET MVC Carousel Control")), [WinForms](https://www.syncfusion.com/winforms-ui-controls/carousel "WinForms Carousel Control"), [WPF](https://www.syncfusion.com/wpf-controls/carousel "WPF Carousel Control"), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-carousel-view "Xamarin.Forms Carousel view"), and [UWP](https://www.syncfusion.com/uwp-ui-controls/carousel "UWP Carousel View") platforms. Use it in your app and enjoy hassle-free slide navigation!

If you’re already a Syncfusion user, you can download the [product setup](https://www.syncfusion.com/account/downloads/studio/ "License and download page of Essential Studio"), or, you can download a free [30-day trial ](https://www.syncfusion.com/account/downloads/studio "Free evaluation of the Syncfusion Essential Studio")to evaluate our products.

For questions, contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion feedback portal"). We are delighted to help you at any time!

## Related blogs

- [What’s New in 2022 Volume 2: Essential JS 2](https://www.syncfusion.com/blogs/post/whats-new-in-2022-volume-2-essential-js-2.aspx "Blog: What’s New in 2022 Volume 2: Essential JS 2")
- [Syncfusion Essential Studio 2022 Volume 2 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-2-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 2 Is Here!")
- [Handling Concurrent Requests with JavaScript Callbacks](https://www.syncfusion.com/blogs/post/handling-concurrent-requests-with-javascript-callbacks.aspx "Blog: Handling Concurrent Requests with JavaScript Callbacks")
- [11 Console Methods in JavaScript for Effective Debugging](https://www.syncfusion.com/blogs/post/11-console-methods-in-javascript-for-effective-debugging.aspx "Blog: 11 Console Methods in JavaScript for Effective Debugging")