AngularJS Tutorial For Beginners: AngularJS Responsive Animate Slider

Create index.html

<!DOCTYPE html>
<html ng-app="website">
<head>
<meta charset="utf-8">
<title>AngularJS Responsive Animate Slider</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body ng-controller="MainCtrl">
<div class="container slider"> <img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage"
         ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()"
         ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}"> <a class="arrow prev" href="#" ng-click="nextSlide()"></a> <a class="arrow next" href="#" ng-click="prevSlide()"></a>
  <nav class="nav">
    <div class="wrapper">
      <ul class="dots">
        <li class="dot" ng-repeat="slide in slides"> <a href="#" ng-class="{'active':isCurrentSlideIndex($index)}"
                       ng-click="setCurrentSlideIndex($index);">{{slide.description}}</a></li>
      </ul>
    </div>
  </nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

Create style.css

body {
    overflow: hidden;
    background-color: #CCCCCC;
}

.slider {
    width: 800px;
    height: 400px;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 20px solid #FFF;
    margin-top: 20px;
 margin:auto;
}
.container slider{
width:100%;
}

/*Responsive slider code here*/

@media (max-width: 320px) {
.slider {
    width: 100%;
    height: 208px;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 2px solid #FFF;
    margin-top: 20px;
}
.slider img{
width:100%;
}

}
@media (max-width: 360px) {
.slider {
    width: 100%;
    height: 208px!important;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 2px solid #FFF;
    margin-top: 20px;
}
.slider img{
width:100%;
}
}
@media (max-width: 480px) {
.slider {
    width: 100%;
    height: 208px!important;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 2px solid #FFF;
    margin-top: 20px;
}
.slider img{
width:100%;
}
}
@media (max-width: 768px) {
.slider {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 2px solid #FFF;
    margin-top: 20px;
}
.slider img{
width:100%;
}
}
@media (max-width: 800px) {
.slider {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 2px solid #FFF;
    margin-top: 20px;
}
.slider img{
width:100%;
}
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
}

.arrow {
    position: absolute;
    z-index: 1002;
    display: block;
    top: 50%;
    margin-top: -35px;
    width: 36px;
    height: 71px;
    outline: none;
    cursor: pointer;
    background: url(../assets/img/blank.gif) no-repeat;
}

.arrow.prev {
    opacity: 0.2;
    left: 20px;
    background-image: url(../assets/img/paddle_prev_999.png);
    transition: 0.2s linear all;
}

.arrow.next {
    opacity: 0.2;
    right: 20px;
    background-image: url(../assets/img/paddle_next_999.png);
    transition: 0.2s linear all;
}

.arrow.prev:hover {
    opacity: 1;
    background-image: url(../assets/img/paddle_prev_fff.png);
}

.arrow.next:hover {
    opacity: 1;
    background-image: url(../assets/img/paddle_next_fff.png);
}

/*---------------------------------------------------------
NAV
---------------------------------------------------------*/

.nav {
    text-align: center;
    display: block;
    position: absolute;
    z-index: 1002;
    left: 0;
    bottom: -4px;
    right: 0;
    height: 48px;
}

.nonDraggableImage{
    -webkit-user-drag: none;
}

.nav .wrapper {
    margin: 0 auto;
    width: 100%;
    padding: 1em 0 .8em;
}

.nav ul {
    margin: 0;
    width: 100%;
}
@media (max-width: 320px) {
.nav ul {
    margin: auto;
    
}
}
.nav .dot, .nav .dot a {
    display: inline-block;
    zoom: 1;
}

.dots .dot {
    position: relative;
    margin: 0 8px;
    width: 12px;
    height: 12px;
}
@media (max-width: 320px) {
.dots .dot {
    position: relative;
    margin: auto;
    width: 42px;
    height: 12px;
}
}

.dots .dot a {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 6px;
    height: 6px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: #FFF;
    border: 1px solid transparent;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background-color 0.25s, border-color 0.25s;
    -moz-transition: background-color 0.25s, border-color 0.25s;
    transition: background-color 0.25s, border-color 0.25s;
}

.dots .dot a.active {
    border-color: #FFF;
    background-color: transparent;
}

Create app.js

angular.module('website', ['ngAnimate', 'ngTouch'])
    .controller('MainCtrl', function ($scope) {
        $scope.slides = [
            {image: 'http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg', description: 'slider1'},
            {image: 'http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg', description: 'slider2'},
            {image: 'http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg', description: 'slider3'},
            {image: 'http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg', description: 'slider4'},
            {image: 'http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg', description: 'slider5'}
        ];

$scope.direction = 'left';
        $scope.currentIndex = 0;

$scope.setCurrentSlideIndex = function (index) {
            $scope.direction = (index > $scope.currentIndex) ? 'left' : 'right';
            $scope.currentIndex = index;
        };

$scope.isCurrentSlideIndex = function (index) {
            return $scope.currentIndex === index;
        };

$scope.prevSlide = function () {
            $scope.direction = 'left';
            $scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0;
        };

$scope.nextSlide = function () {
            $scope.direction = 'right';
            $scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1;
        };
    })
    .animation('.slide-animation', function () {
        return {
            beforeAddClass: function (element, className, done) {
                var scope = element.scope();

if (className == 'ng-hide') {
                    var finishPoint = element.parent().width();
                    if(scope.direction !== 'right') {
                        finishPoint = -finishPoint;
                    }
                    TweenMax.to(element, 0.5, {left: finishPoint, onComplete: done });
                }
                else {
                    done();
                }
            },
            removeClass: function (element, className, done) {
                var scope = element.scope();

if (className == 'ng-hide') {
                    element.removeClass('ng-hide');

var startPoint = element.parent().width();
                    if(scope.direction === 'right') {
                        startPoint = -startPoint;
                    }

TweenMax.fromTo(element, 0.5, { left: startPoint }, {left: 0, onComplete: done });
                }
                else {
                    done();
                }
            }
        };
    });

Tuesday, 14 April 2015

AngularJS Responsive Animate Slider

Create index.html

Create style.css

Create app.js

1 comment: