Angular Super Slick Carousel

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

<hr class="Divider subdue"> <div>  <ul class="download"> <li><a href="http://www.codeproject.com/KB/HTML/895739/AngularSuperSlickCarousel.zip">Download AmgularSuperSlickCarousel.zip - 8.6 MB</a></li> </ul> <h4><a href="http://www.SerGioApps.com/storefront.html" target="_blank">Click Here to See A Working Demo of My Angular Super Slick Carousel</a></h4> <h4><a href="http://www.software-rus.com/" target="_blank">Click Here to My Other FREE Source Code Projects</a></h4> <img height="230px" src="article_files/scarousel.gif" width="480px"> <table> <tbody> <tr> <td><img height="480px" src="./article_files/mobile.gif" width="255px"></td> <td>  </td> <td> <h3 style="text-align: center;">Swipe works perfectly on all mobile devices</h3>

		<h3 style="text-align: center;"><strong>Works as<br>
		Web App on Server<br>
		or<br>
		in an AngularJS<br>
		PhoneGap App</strong></h3>
		</td>
	</tr>
</tbody>

</table> <h2>Introduction</h2> I wanted to add a Carousel to my AngularJS Shopping Cart that you can see in my article <a href="http://www.codeproject.com/Articles/881354/A-Responsive-Mobile-Shopping-Cart-Using-AngularJS" target="_blank">Responsive Mobile Shopping Cart Using AngularJS</a> 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: <ul> <li>Uses AngularJS Dynamic Templates for Pills: Images, Videos and Notes </li> <li>Plays Videos from ALL Tubes Sites that allow EMBED, e.g. YouTube, YouKu, Vimeo, etc.</li> <li>Ability to easily create an AngularJS Directive for the Carousel</li> <li>Fully Responsive for Mobile. Scales with its container.</li> <li>Separate settings per breakpoint</li> <li>Uses CSS3 when available. Fully functional when not.</li> <li>Swipe Enabled for Mobile. Or disabled, if you prefer.</li> <li>Desktop mouse dragging</li> <li>Infinite looping.</li> <li>Fully accessible with arrow key navigation</li> <li>Add, remove, filter & unfilter slides</li> <li>Autoplay, dots, arrows, callbacks, etc...</li> </ul> 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: <a href="https://github.com/kenwheeler/slick" target="_blank">https://github.com/kenwheeler/slick</a>  And there was already an AngularJS Directive for the Slick Carousel by Vasyl Stanislavchuk that I found at: <a href="https://github.com/vasyabigi/angular-slick" target="_blank">https://github.com/vasyabigi/angular-slick</a> 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.  <h2>AngularJS Super Slick Carousel  Features</h2> 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 <a href="https://github.com/kenwheeler/slick/" target="_blank">here</a>.  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: <a href="http://www.colorzilla.com/gradient-editor/" target="_blank">http://www.colorzilla.com/gradient-editor/</a>.  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  <pre>// In config.js file we set the value:    'CF_CAROUSEL_AUTO_PLAY': true,</pre> 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. <pre><slick id="storeslider" ng-if="dataLoaded" autoplay="CAROUSEL_AUTO_PLAY" init-onload="false" data="dataLoaded" slick-apply='slickApply' slides-to-show=3 slides-to-scroll=1 class="col-md-12 slider responsive multiple-items center-wrapper"> ...</pre> 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. <pre>// Now you can set RESPONSIVE properties based on window size in the DIRECTIVE code as seen below: onReInit: attrs.onReInit ? scope.onReInit : void 0, onSetPosition: attrs.onSetPosition ? scope.onSetPosition : void 0, pauseOnHover: scope.pauseOnHover !== 'false', /* responsive: scope.responsive || void 0, */ responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 1, infinite: true, dots: false } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 1 } }, { breakpoint: 480, settings: { dots: false, slidesToShow: 1, slidesToScroll: 1 } }],</pre> 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:  <pre>storeApp.controller('storeController', function ($scope, $filter, $routeParams, $location, DataService, $sce, $timeout, CONFIG) { $scope.dataLoaded = false; /*##################### CONFIG ######################*/ /* our global variabls */ $scope.STORE_ID = CONFIG.CF_STORE_ID; $scope.STORE_PAGE = CONFIG.CF_STORE_PAGE; $scope.STORE_BG_IMAGE = CONFIG.CF_STORE_BG_IMAGE; $scope.DISTRIBUTOR_ID = CONFIG.CF_DISTRIBUTOR_ID; $scope.PAYMENT_PAYPAL_BUYNOW = CONFIG.CF_PAYMENT_PAYPAL_BUYNOW; $scope.PAYMENT_GOOGLE_WALLET_ID = CONFIG.CF_PAYMENT_GOOGLE_WALLET_ID; $scope.PAYMENT_STRIPE = CONFIG.CF_PAYMENT_STRIPE; $scope.PRODUCTS_FOLDER = CONFIG.CF_PRODUCTS_FOLDER; $scope.PRODUCTS_FILE = CONFIG.CF_PRODUCTS_FILE; $scope.NAVBAR_THEME = CONFIG.CF_NAVBAR_THEME; $scope.NAVBAR_LOGO_TEXT = CONFIG.CF_NAVBAR_LOGO_TEXT; $scope.NAVBAR_LOGO_LINK = CONFIG.CF_NAVBAR_LOGO_LINK; $scope.INSIDE_HEADER_SHOW = CONFIG.CF_INSIDE_HEADER_SHOW; $scope.INSIDE_HEADER_LINK = CONFIG.CF_INSIDE_HEADER_LINK; $scope.INSIDE_HEADER_IMAGE = CONFIG.CF_INSIDE_HEADER_IMAGE; $scope.INSIDE_HEADER_TITLE = CONFIG.CF_INSIDE_HEADER_TITLE; $scope.CAROUSEL_SHOW = CONFIG.CF_CAROUSEL_SHOW; $scope.CAROUSEL_AUTO_PLAY = CONFIG.CF_CAROUSEL_AUTO_PLAY; $scope.AN_CAROUSEL_IMG_VIDEO = CONFIG.CF_AN_CAROUSEL_IMG_VIDEO; $scope.AN_CAROUSEL_PILL = CONFIG.CF_AN_CAROUSEL_PILL; $scope.AN_STORE_IMG_VIDEO = CONFIG.CF_AN_STORE_IMG_VIDEO; $scope.AN_STORE_PILL = CONFIG.CF_AN_STORE_PILL; $scope.CAROUSEL_IMAGE_BORDER = CONFIG.CF_CAROUSEL_IMAGE_BORDER; $scope.STORE_IMAGE_BORDER = CONFIG.CF_STORE_IMAGE_BORDER; $scope.SYSTEM_NAME = CONFIG.CF_SYSTEM_NAME; $scope.SYSTEM_LANGUAGE = CONFIG.CF_SYSTEM_LANGUAGE; $scope.BASE_URL = CONFIG.CF_BASE_URL; $scope.API_URL = CONFIG.CF_API_URL; $scope.GOOGLE_ANALYTICS_ID = CONFIG.CF_GOOGLE_ANALYTICS_ID; $scope.products = []; $scope.slides = []; $scope.fetchContent = function () { DataService.getData().then(function (result) { $scope.products = result.data; for (var i = 0, len = $scope.products.lengt

AngularSuperSlickCarousel

Install / Use

README

Angular Super Slick Carousel