Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (158).NET Core  (28).NET MAUI  (50)Angular  (67)ASP.NET  (50)ASP.NET Core  (78)ASP.NET MVC  (88)Azure  (32)Blazor  (144)DocIO  (23)Essential JS 2  (80)Essential Studio  (171)File Formats  (28)Flutter  (121)JavaScript  (179)Microsoft  (112)PDF  (67)React  (55)Succinctly series  (126)Syncfusion  (582)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (36)Webinar  (32)Windows Forms  (58)WinUI  (45)WPF  (135)Xamarin  (153)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (118)Chart  (56)Cloud  (11)Company  (445)Dashboard  (7)Data Science  (3)Data Validation  (6)DataGrid  (54)Development  (372)Doc  (7)DockingManager  (1)eBook  (95)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (23)Extensions  (17)File Manager  (4)Gantt  (11)Gauge  (9)Git  (4)Grid  (27)HTML  (10)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (298)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (29)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (36)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (22)Solution Services  (2)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (91)UI  (209)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (23)Visual Studio Code  (14)Web  (341)What's new  (194)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Building an Image Carousel in JavaScript Is Now Easy

Building an Image Carousel in JavaScript Is Now Easy!

The JavaScript Carousel 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.

JavaScript Carousel Control
JavaScript Carousel Control

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:

Slide creation

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.

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”);
Creating Slides Using JavaScript Carousel Control
Creating Slides Using JavaScript Carousel Control

You can manually perform slide transitions with the previous and next navigation buttons. You can show or hide the buttons using the buttonsVisibility 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 options to customize the navigation buttons.

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

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”);

Play/pause button

The play button is used to control the autoplay slide functionality. You can show or hide and customize the play button using the showPlayButton and playButtonTemplate properties, respectively.

Refer to the following image.

Play/Pause Button in JavaScript Carousel Control
Play/Pause Button in JavaScript Carousel Control

Indicators

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 property. Display the preview of a slide or thumbnail in the indicators using the indicatorsTemplate property.

Refer to the following image.

Indicators in JavaScript Carousel Control
Indicators in JavaScript Carousel Control

Note: Refer to the template examples in the JavaScript Carousel control for more details.

Animation and transitions

You can enjoy hassle-free transitions while navigating among the slides with the built-in slide and cross-fade animation 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 property.

You can also use the pauseOnHover 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 documentation.

WAI-ARIA compliance and keyboard accessibility

The Carousel control was built based on the WAI-ARIA 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:

KeyFunctionalities
Arrow keysNavigate between slides.
HomeNavigate to the first slide.
EndNavigate to the last slide.
SpacePlay or pause the slide transitions.
EnterPerform the respective action when in focus.

Reference

For more details, refer to the Getting started with JavaScript Carousel control documentation and online demos.

Conclusion

Thanks for reading! In this blog, we have seen the key features of our JavaScript Carousel control. The Carousel control is also available in our AngularBlazor, ReactVue, ASP.NET (Core and MVC), WinFormsWPFXamarin, and UWP 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, or, you can download a free 30-day trial to evaluate our products.

For questions, contact us through our support forumssupport portal, or feedback portal. We are delighted to help you at any time!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top