Web developers require from time to time to create different types of images sliders and carousel in their apps. Most developers coming from jQuery and other plugin tend to want to use the tools they are already familiar with – like that amazing jQuery plugin you used before. But doing that would make your app bloated if you imported an extra library that you will be under using. It would be much better if you used an Angular carousel module to achieve this. So, today I have decided to do some research and test out 5 carousel modules for Angular (Not AngularJS) and above.

1. Bootstrap Carousel

Bootstrap is one of the most popular frontend frameworks out there. It has component for almost everything and its well designed and easy to use. It relies mainly on jQuery to function. The reason am suggesting you use it, it’s because you can replace jQuery with Angular module so that bootstrap works without jQuery. This module is known as ng-boostrap. You can learn how to setup Bootstrap 4 in your Angular 4 app here. You can use the Bootstrap carousel component to make a nice image slider for your app with ng-bootstrap using the following instructions. Ng-bootstrap has some nice tutorials on how to use it with bootstrap here.

2. Angular4 Carousel

Angular Module for Image Slider and Carousel

This is a simple image carousel for an Angular app. It doesn’t do more than that or less, it does simply what it says it does – be an image slide. If you are already too deep in your application, this can be a simple, quick solution for you. Learn more about this image carousel here and demo here.

3. ngx-carousel

This is a light image slider with multiple options. It offers options such as Banner image slider and tile image slider with and without loop. The only downside with this carousel is that it doesn’t contain any CSS hence you will need to add on your own. If you are not experience this might be a problem. The upside is that it supports gestures and touch controls using hammerjs. You can view a demo here and installation for instructions here.

4. ngx-slick

Another image slider for Angular that does just what it says. It is simple just like Angular4 carousel. You can view an example here and checkout the instructions to install it here. It has the option to have a banner image slider or tile image slider. It’s a decent image slider module to have in your arsenal.

5. Angular2+ Draggable Carousel

4th on this list is a different kind of image slider. It offers two options: An image slider (tile and banner images) as illustrated in the image above and scroll bars for large single images. This can be suitable for adding large image on a page without taking large chunk of space or as simple image slider. And likes it names says, it also offers the option to drag through the images in the slider. Here is a demo and instruction on how to use it.