10+ Angular Carousel Demos

Everybody loves image carousels they bring a website/app to life with the use being able to slide through some images without loading delays. Here are some Angular Carousel Demos which can help you get an angular carousel working in no time at all. Just add the module, components and class then sprinkle some HTML and css positioning magic and watch your images turn awesome.

1. AngularJS Touch Carousel

AngularJS Touch Carousel
AngularJS Touch Carousel

Transform your ng-repeat or DOM nodes in a mobile-friendly carousel just by adding a ‘rn-carousel’ attribute to your HTML; AngularJS directives. Carousels are data-bound to your ngRepeat collections and can be DOM buffered (good for performance). Swipe these demos with your mouse or finger.

Code Demo

2. Angular Slick Carousel

Angular Slick Carousel
Angular Slick Carousel

Fully responsive. Scales with its container. Separate settings per breakpoint. Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging and infinite looping. Fully accessible with arrow key navigation, add, remove, filter & unfilter slides. Autoplay, dots, arrows, callbacks, etc…

Code Demo

3. NG UI Carousel

NG UI Carousel
NG UI Carousel

A simple, lightweight module for carousel in your AngularJS app. No Jquery required. IE9+ (AngularJS v1.3.x no longer supports IE8) and the latest versions of Chrome, FireFox and Safari have been tested and are supported.

Code Demo

4. AngularJS Basic Carousel

AngularJS Basic Carousel
AngularJS Basic Carousel

Every cool app needs a Carousel. Its not cool till it has one. And so, there are a dozen or so variations of an AngularJS Carousel Directive out there in the wild. Here is a basic AngularJS carousel sample.

Demo

5. Carousel with AngularJs

Carousel with AngularJs
Carousel with AngularJs

A fully responsive image carousel slideshow which allows you to loop through multiple groups of images. This is a simple carousel implementation with AngularJS.

Demo

6. Angular 3D Carousel Spinning

Angular 3D Carousel Spinning
Angular 3D Carousel Spinning

An angular.js directive for a customizable, interactive 3D carousel. Will always land exactly on one side. Uses requestAnimationFrame for a smooth animation. Dynamically add or remove sides.

Demo

7. Angular Carousel 3D with Caption

Angular Carousel 3D with Caption
Angular Carousel 3D with Caption

Angular directive that allow you to build 3D carousel. If you use bower, just run bower install angular-carousel-3d. If not, download files angular-swipe.js, carousel-3d.css, and carouse3d.js.

Demo

8. Angular 4 Carousel

Angular 4 Carousel
Angular 4 Carousel

Learn the basics behind Angular v4 (aka Angular2) in this series. We’ll cover the basics including:Setup Angular and your first Angular app, two-way data binding, angular Templates, using Angular Components, angular CLI (command line interface), compiling to production
, creating custom pipes, integrate Bootstrap (getbootstrap.com), anddeploy an Angular app to Heroku.com

Tutorial Demo

9. Angular 2+ Carousel

Angular 2+ Carousel
Angular 2+ Carousel

Simple carousel/slider for angular 2. Ng2-carouselamos is a simple carousel/slider which just use css transitions to do the work.

Tutorial

10. AngularJS Slideshow

AngularJS Slideshow
AngularJS Slideshow

This video will show you how to create a slideshow by using AngularJS. I prefer to use jquery to create beautiful slideshows, but in this tutorial I will show an easy way to create a slideshow in AngularJS.

Tutorial

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

Leave a Reply

Your email address will not be published. Required fields are marked *