var slideApp = angular.module('slideApp',['slick']);
slideApp.controller('slideCtrl',['$scope',function($scope){
$scope.items = [
{imgSrc:'https://static.pexels.com/photos/6555/nature-sunset-person-woman.jpg',label:'SunSet'},
{imgSrc:'http://kingofwallpapers.com/images/images-016.jpg',label:'Planet'},
{imgSrc:'http://wallpapershdfine.com/wp-content/gallery/hd-images-of-tiger/tigers-wallpapers-hd.jpg',label:'Leaping Tiger'}
]
}]);
<!DOCTYPE html>
<html ng-app="slideApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="slideCtrl">
<slick class="slider" speed="300" slides-to-show=1 slides-to-scroll=1 prev-arrow=".prev" autoplay="true" dots="true" next-arrow=".next">
<div ng-repeat="item in items" class="slider-container">
<a href=""><img ng-src="{{item.imgSrc}}" alt="{{item.label}}"></a>
</div>
</slick>
<button type="button" class="prev"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button type="button" class="next"><i class="glyphicon glyphicon-chevron-right"></i></button>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<script src="slick.js"></script>
<script src="app.js"></script>
</body>
</html>
/* Put your css in here */
.container{
width: 1600px;
margin: 0 auto;
background-color: beige;
}
.slider-container{
width: 80%;
margin: 0 auto;
height: 600px;
}
.slider-container img{
height: 600px;
width: auto;
margin: 0 auto;
}
.slick-prev, .slick-next{
z-index: 1;
}
.slick-prev{
left: 220px;
}
.slick-next{
right: 220px;
}
.slick-prev:before, .slick-next:before{
color: #251F1F;
}
.slider{
position: relative;
}
.prev{
left: 15%;
}
.next{
right: 15%;
}
.prev, .next{
background: #F5F5DC;
padding: 1.875em 0.3125em;
position: absolute;
top: 35%;
z-index: 1;
font-size: 2em;
border: 0;
}
.slick-dots li a {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li a {
width: 8px;
height: 8px;
padding: 0;
background: #d5d5d5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: relative;
}
.slick-dots li.slick-active a {
background: #535353;
}
'use strict';
angular.module('slick', []).directive('slick', [
'$timeout',
function ($timeout) {
return {
restrict: 'AEC',
scope: {
initOnload: '@',
data: '=',
currentIndex: '=',
accessibility: '@',
adaptiveHeight: '@',
arrows: '@',
asNavFor: '@',
appendArrows: '@',
appendDots: '@',
autoplay: '@',
autoplaySpeed: '@',
centerMode: '@',
centerPadding: '@',
cssEase: '@',
customPaging: '&',
dots: '@',
draggable: '@',
easing: '@',
fade: '@',
focusOnSelect: '@',
infinite: '@',
initialSlide: '@',
lazyLoad: '@',
onBeforeChange: '&',
onAfterChange: '&',
onInit: '&',
onReInit: '&',
onSetPosition: '&',
pauseOnHover: '@',
pauseOnDotsHover: '@',
responsive: '=',
rtl: '@',
slide: '@',
slidesToShow: '@',
slidesToScroll: '@',
speed: '@',
swipe: '@',
swipeToSlide: '@',
touchMove: '@',
touchThreshold: '@',
useCSS: '@',
variableWidth: '@',
vertical: '@',
prevArrow: '@',
nextArrow: '@'
},
link: function (scope, element, attrs) {
var destroySlick, initializeSlick, isInitialized;
destroySlick = function () {
return $timeout(function () {
var slider;
slider = $(element);
slider.unslick();
slider.find('.slick-list').remove();
return slider;
});
};
console.log(element);
initializeSlick = function () {
return $timeout(function () {
var currentIndex, slider;
slider = $(element);
if (scope.currentIndex != null) {
currentIndex = scope.currentIndex;
}
slider.slick({
accessibility: scope.accessibility !== 'false',
adaptiveHeight: scope.adaptiveHeight === 'true',
arrows: scope.arrows !== 'false',
asNavFor: scope.asNavFor ? scope.asNavFor : void 0,
appendArrows: scope.appendArrows ? $(scope.appendArrows) : $(element),
appendDots: scope.appendDots ? $(scope.appendDots) : $(element),
autoplay: scope.autoplay === 'true',
autoplaySpeed: scope.autoplaySpeed != null ? parseInt(scope.autoplaySpeed, 10) : 3000,
centerMode: scope.centerMode === 'true',
centerPadding: scope.centerPadding || '50px',
cssEase: scope.cssEase || 'ease',
customPaging: attrs.customPaging ? scope.customPaging : void 0,
dots: scope.dots === 'true',
draggable: scope.draggable !== 'false',
easing: scope.easing || 'linear',
fade: scope.fade === 'true',
focusOnSelect: scope.focusOnSelect === 'true',
infinite: scope.infinite !== 'false',
initialSlide: scope.initialSlide || 0,
lazyLoad: scope.lazyLoad || 'ondemand',
onBeforeChange: attrs.onBeforeChange ? scope.onBeforeChange : void 0,
onAfterChange: function (sl, index) {
if (attrs.onAfterChange) {
scope.onAfterChange();
}
if (currentIndex != null) {
return scope.$apply(function () {
currentIndex = index;
return scope.currentIndex = index;
});
}
},
onInit: function (sl) {
if (attrs.onInit) {
scope.onInit();
}
if (currentIndex != null) {
return sl.slideHandler(currentIndex);
}
},
onReInit: attrs.onReInit ? scope.onReInit : void 0,
onSetPosition: attrs.onSetPosition ? scope.onSetPosition : void 0,
pauseOnHover: scope.pauseOnHover !== 'false',
responsive: scope.responsive || void 0,
rtl: scope.rtl === 'true',
slide: scope.slide || 'div',
slidesToShow: scope.slidesToShow != null ? parseInt(scope.slidesToShow, 10) : 1,
slidesToScroll: scope.slidesToScroll != null ? parseInt(scope.slidesToScroll, 10) : 1,
speed: scope.speed != null ? parseInt(scope.speed, 10) : 300,
swipe: scope.swipe !== 'false',
swipeToSlide: scope.swipeToSlide === 'true',
touchMove: scope.touchMove !== 'false',
touchThreshold: scope.touchThreshold ? parseInt(scope.touchThreshold, 10) : 5,
useCSS: scope.useCSS !== 'false',
variableWidth: scope.variableWidth === 'true',
vertical: scope.vertical === 'true',
prevArrow: scope.prevArrow ? $(scope.prevArrow) : void 0,
nextArrow: scope.nextArrow ? $(scope.nextArrow) : void 0
});
return scope.$watch('currentIndex', function (newVal, oldVal) {
if (currentIndex != null && newVal != null && newVal !== currentIndex) {
return slider.slickGoTo(newVal);
}
});
});
};
if (scope.initOnload) {
isInitialized = false;
return scope.$watch('data', function (newVal, oldVal) {
if (newVal != null) {
if (isInitialized) {
destroySlick();
}
initializeSlick();
return isInitialized = true;
}
});
} else {
return initializeSlick();
}
}
};
}
]);