Angular-Super-Slick-Carousel

Angular Carousel - This is the BEST Angular Carousel on the Web -- Try It and See for Yourself
0 people use it
Author: 3949226?v=3 tvmogul

Angular Super Slick Carousel

This is the BEST Angular Carousel on the Web -- Try It and See for Yourself

Introduction

I wanted to add a Carousel to my AngularJS Shopping Cart that you can see in my article Responsive Mobile Shopping Cart Using AngularJS that I posted here on CodeProject last month. However I wanted a carousel that can be used either inside or outside of a shopping cart and that had the following features:

Uses AngularJS Dynamic Templates for Pills: Images, Videos and Notes  Plays Videos from ALL Tubes Sites that allow EMBED, e.g. YouTube, YouKu, Vimeo, etc. Ability to easily create an AngularJS Directive for the Carousel Fully Responsive for Mobile. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe Enabled for Mobile. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc...

To accomplish this I looked at a lot of carousels and the nicest looking carousel with the above features was a JQuery plugin-in by Ken Wheeler called Slick. You can see the JQuery plugin-in at: https://github.com/kenwheeler/slick  And there was already an AngularJS Directive for the Slick Carousel by Vasyl Stanislavchuk that I found at: https://github.com/vasyabigi/angular-slick

The project in this article is a modified version I created of Vasyl Stanislavchu's Angular Directive for the Slick Carousel that includes other features I added that are needed to allow dynamic creation of the carousel on window resize, pill blocks with images, videos, text and Bootstrap 3 buttons with gradients that can be individually animated with hover effects. The AngularJS Super Slick Carousel in this article can be used as either a stand-alone carousel with or without products or you can add it to my AngularJS Shopping Cart by just dropping in the code. I wanted to keep the code for the carousel separate from just including it in the shopping cart because there are a lot of people who believe that carousels kill sales. I am not going to get involved in teh debate or pro or con carousels. 

AngularJS Super Slick Carousel  Features

The full collection of features in the Super Slick Carousel are too numerous to list but you can see all of the included features and how to set them here. 

I used Bootstrap 3 but NOT ui.bootstrap because ui.bootstrap gives me headaches trying to keep up with their changes. Bootstrap 3 has navbars where it easy to change the look-and-feel of the navbars from in side your app using AngularJS as demonstrated below in the shopping cart. To create the gradient in these navbars I used the gradient editor at: http://www.colorzilla.com/gradient-editor/.‚Äč 

There are several ways to setup the carousel's default setting. In the html code we can hard code settings, or set them to a variable as in teh case of using 

as used in the Slick declaration below in the html. where the value of CAROUSEL_AUTO_PLAY is set in the config,js file in the ac_products directory. Please note that you can add any other setup parameters you want to this config.js file and then use them in the html declaration like I did for autoplay="CAROUSEL_AUTO_PLAY" as shown below.

I added another way of setting the defaults the directive as shown below for responsive setting to allow the AngularJS to display correctly on mobile devices. As shown below you can see how to set the responsive proties you want based upon window size.

The other changes that are important to improve responsiveness and use in mobile devices either as as a web app on a server or inside a compiled native PhoneGap/Cordova Mobile App are: 

I am using promises with the $http.get call to fetch our content from our products file.

AngularJS Dynamic Templates

I decided to re-write the code using Dynamic Templates to allow users to easily customize the the look and feel of the carousel. I create 3 temples as shown below.

Our data models are differentiated by displayType, namely, videoTemplate, noteTemplate, and imageTemplate which are stored in a text file, i.e., templates.txt, as follows:

And I created a Template Service to retrieve the templates form templates.txt as follows.

storeApp.factory('TemplateService', function ($http, URL) { var getTemplates = function () { return $http.get(URL + 'templates.txt'); }; return { getTemplates: getTemplates }; });

I created a directive called pillContent restricted to an element with an isolated scope that is bound to the content property and a linker function to tie everything together as shown here.

The idea is that we get the desired template and add it to the DOM via element.html() and then show(). We use the $compile service that compiles an HTML string into a template and template function, which we use to link scope and the template together. 

The entire code for our Slider HTML is just:

And I added a class to the imageTemplate to customize adding different borders to images as follows:

Playing Video from Any Source That Allows Embed

I wanted to be able to play videos from any Tube Site that allows you to embed video in the Pills so I decided to use, $sceDelegateProvider, as follows: 

As an example, you can play videos from these Tube Sites that allow you to enbed video. I included a "products" source file called "video.txt" that displays videos form all of these Tube Sites in the carousel.

Hover Effects Library

I decided to add a collection of hover animations that you can apply from the Bootstrap 3 navbar in the sample project that you can apply to different objects in the Slick Carousel. The Hover Library is called Hover by Ian Lunn which you can explore on his GitHub at: https://github.com/IanLunn

You can apply the effects to see what they look like using the Effects Tab in the menu.

Here is how I setup the hover animations to work.  First the default values for the hover effects are read from the config.js file and applied to the div tags for the pil and im_vide. Then you can use the effects menu in the navbar to apply different effects dynamically to the pil and img/video of the carousel and to the pil and img/video in the shopping cart if you use this carousel in the shopping cart as shown below.    

Bootstrap 3 Gradient Buttons

I don't like the falt look of default Bootstrap 3 buttons so I decided to give them some depth as shown below. To do this I used a really cool Bootstrap 3 Editor that creates buttons with a gradient and mouse over and mousedown eeffects with a single block of CSS code at: http://charliepark.org/bootstrap_buttons/

Bootstrap 3 Menu Control

I kept the menu control for our Bootstrap 3 menu very simple as you can see below. To set the active tab I used ng-controller to run a single controller outside of the ng-view as shown below.

and... 

The next thing that I think every shopping cart needs is the ability to give out Distributor Links to your distributors so that a distributor can place a link on their non-Angular website or in a PhoneGap or Cordova mobile app that will pass the Distributor ID Code into your cart AND add that product into the cart on the checkout page if and only if it is NOT already in our cart. I added this feature by using url parameters like the link shown below.: 

This link will paas in the distid and sku as url parameters.

You can eithher add this carousel to my AngularJS shopping cart or use it as a separte app that can add a product to teh shopping cart by calling shoppingCart.js in the installed shopping. Thie code below would be in the shopping cart and NOT in this carousel. 

Below you can see that when I use the carousel by itself outside of the shopping cart view the buy button does not indicate that the item has been added to the shopping cart because this view isn't inside any shopping cart. Instead the button will pass the distributor id used for paying commissions and the product sku to the url of a shopping cart that can be on any server anywhere on the web. In my opinion based on a lot of testing we have done the best thing to do when a person clicks on a details link or the product image they should be taken to a full-page ad for that product with a coupon in teh upper right-hand corner of the page.

Allows Multiple JSON 'products.txt' Files

I decided to use a JSON format to storte the products and their properties and retrieve them using AJAX as shown below.

You can easily create different products files and switch between them as show below. The 'products.txt' file is a typical shopping cart and the 'videos.txt' file is a demo of pulling videos from many different Tube Sites.

And the code that swtiches the source files is as follows:

Conclusion

In my experience a carousel is a nice way without using a shopping cart to present a few products that may be on sale. However, there are many people who disagree with using any form of carousel in a website as studies has  shown that it is basically not a good way to present products to potential customers. I am not going to discuss the merits of carousels. This article was to simply present the very popular Slick Carousel in an AngularJS Directive. The Slick Carousel was the most mobile friendly carousel Ifound because it includes Swipe which seems to work nicely on the mobile devices I tested it on.

 

 

comments powered by Disqus
This page was last updated over 2 years ago.