Animated slider in pure angular

Developer
Robert Lowe
Size
5,111 Kb
Views
38,456
  1. Animated slider in pure angular Previews
  2. Animated slider in pure angular HTML Codes
  3. Animated slider in pure angular CSS Codes
  4. Animated slider in pure angular JS Codes

How do I make an animated slider in pure angular?

Inspired by this slider approach: http://codepen.io/zuraizm/pen/vGDHl/No jquery required, just angular. Fixed width atm, but responsive sizing could be a thing with more work : ). What is a animated slider in pure angular? How do you make a animated slider in pure angular? This script and codes were developed by Robert Lowe on 22 July 2022, Friday.

Animated slider in pure angular Previews
IQ Test

Animated slider in pure angular - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated slider in pure angular</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="display" ng-app="angularSlider"> <slider width="600" height="400"></slider>
</div> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated slider in pure angular - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
*, *::before, *::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { background-color: #87D5DE; margin: 0; padding: 0; font-family: 'Open Sans';
}
.display { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; margin-top: 10em;
}
.slider-box { position: relative; border: 1px solid white; overflow: hidden !important; box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.6);
}
.slider-box ul { position: relative; margin: 0; padding: 0; list-style: none; left: 0;
}
.slider-box ul.animate { transition: left 0.2s linear;
}
.slider-box ul li { position: relative; display: block; float: left; background: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/white_tiles.png"); text-align: center;
}
.slider-box ul li span { font-size: 1.6em;
}
.slider-box .slider-btn { position: absolute; top: 40%; display: flex; justify-content: center; align-items: center; height: 20%; width: 10%; background-color: #41676B; color: white;
}
.slider-box .slider-btn:hover { box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.5); border-radius: 0.3em;
}
.slider-box .slider-btn:hover i { transform: scale(1.3);
}
.slider-box .slider-btn:hover.prev i { margin-left: -0.5em;
}
.slider-box .slider-btn:hover.next i { margin-left: 0.5em;
}
.slider-box .slider-btn.prev { left: 0;
}
.slider-box .slider-btn.next { right: 0;
}
.slider-box .slider-btn i { transition: all 0.1s linear;
}

Animated slider in pure angular - Script Codes JS Codes

// delcare a module to hold all the things
var AngularSlider = angular.module("angularSlider", ['ngSanitize']);
// declare a service to hold the nitty-gritty logic
// putting all this logic in a service will allow our controller code to be small,
// making it easier to reuse if we want different/multiple sliders on one page
// most functions here are passed $scope and perform the same as they would if
// declared in the controller itself.
// the goToPrevious() and goToNext() functions are passed angular's $event object
// on click, and resolve $scope from $event.target.
AngularSlider.factory('sliderService', function() { var serv = {}; serv.toPx = function(value) { return [value, 'px'].join(''); }; serv.resetItemContainer = function($scope) { angular.element($scope.itemContainer).css('left', serv.toPx(-$scope.itemWidth)); }; serv.resetItemList = function($scope) { $scope.itemList = $scope.itemContainer.querySelectorAll('li'); }; serv.performPrepend = function($scope) { var lastItem = angular.element($scope.itemList[$scope.itemList.length - 1]).detach(); angular.element($scope.itemContainer).prepend(lastItem); serv.resetItemList($scope); serv.resetItemContainer($scope); }; serv.performAppend = function($scope) { var firstItem = angular.element($scope.itemList[0]).detach(); angular.element($scope.itemContainer).append(firstItem); serv.resetItemList($scope); serv.resetItemContainer($scope); }; // applies the initial styling to the slider upon rendering (see directive link function belowe) serv.applyStyles = function($scope) { // get dom element references var sliderListWidth = $scope.items.length * $scope.itemWidth; var ulElement = $scope.element.querySelectorAll('ul'); var liElements = $scope.element.querySelectorAll('li'); var lastLiElement = liElements[liElements.length]; // add dom references we will need for interaction to the scope $scope.itemContainer = ulElement[0]; $scope.itemList = liElements; // apply styles to dom elements angular.element($scope.element).css({ 'min-width': serv.toPx($scope.itemWidth), 'max-width': serv.toPx($scope.itemWidth) }); angular.element(ulElement).css({ 'width': serv.toPx(sliderListWidth), 'left': serv.toPx(-$scope.itemWidth) }); angular.element(liElements).css({ 'height': serv.toPx($scope.itemHeight), 'width': serv.toPx($scope.itemWidth), 'line-height': serv.toPx($scope.itemHeight) }); // move the last item to the front to ensure a smooth transition // if the Previous button is used first var last = angular.element(lastLiElement).detach(); angular.element(ulElement).prepend(last); }; // called when the Previous button is clicked serv.goToPrevious = function($event) { var $scope = angular.element($event.target).scope(); angular.element($scope.itemContainer).addClass('animate'); var leftValue = parseInt(angular.element($scope.itemContainer).css('left')); if (!isFinite(leftValue)) leftValue = 0; var newLeft = parseInt(leftValue + parseInt($scope.itemWidth)); angular.element($scope.itemContainer).css('left', serv.toPx(newLeft)); // given the css transition a moment to animate and then update the dom setTimeout(function() { serv.performPrepend($scope); angular.element($scope.itemContainer).removeClass('animate'); }, 400); }; // called when the Next button is clicked serv.goToNext = function($event) { var $scope = angular.element($event.target).scope(); angular.element($scope.itemContainer).addClass('animate'); var leftValue = parseInt(angular.element($scope.itemContainer).css('left')); if (!isFinite(leftValue)) leftValue = 0; var newLeft = parseInt(leftValue - parseInt($scope.itemWidth)); angular.element($scope.itemContainer).css('left', serv.toPx(newLeft)); // given the css transition a moment to animate and then update the dom setTimeout(function() { angular.element($scope.itemContainer).removeClass('animate'); serv.performAppend($scope); }, 400); }; return serv;
});
// here in the slider controller we define the default width/height and the
// all important items array the slider directive will consume.
AngularSlider.controller("sliderCtrl", function ($scope, sliderService) { // reference the sliderService so we can call the goToNext() and // goToPrevious() service functions inside our template $scope.sliderService = sliderService; // provide some default size values $scope.itemWidth = 500; $scope.itemHeight = 300; // the slider starts on the second item by default to ensure // a smooth transition if the Previous button is clicked first $scope.items = [ { title: 'I have no other dependencies' }, { title: 'I\'m a slider written in angular' }, // start item { title: 'I animate left and right using css' }, { title: 'I can be any size using html attrs' } ];
});
// the slider directive hold the html template and startup logic
AngularSlider.directive("slider", function ($timeout) { return { restrict: "E", replace: true, controller: "sliderCtrl", template: [ '<div class="slider-box">', '<div class="slider">', '<ul>', '<li class="item" ng-repeat="item in items"><span>{{ item.title }}</span></li>', '</ul>', '<div class="slider-btn prev" ng-click="sliderService.goToPrevious($event)"><i class="fa fa-chevron-left"></i></div>', '<div class="slider-btn next" ng-click="sliderService.goToNext($event)"><i class="fa fa-chevron-right"></i></div>', '</div>', '</div>' ].join(''), link: function link(scope, element, attrs) { // wrap our startup code in $timeout so it will run after the dom is rendered // I believe this is necessary because our startup code applies css to elements // generated by ng-repeat $timeout(function() { scope.element = element[0]; if (attrs.width) { scope.itemWidth = parseInt(attrs.width); } if (attrs.height) { scope.itemHeight = parseInt(attrs.height); } scope.sliderService.applyStyles(scope); }); } };
});
Animated slider in pure angular - Script Codes
Animated slider in pure angular - Script Codes
Home Page Home
Developer Robert Lowe
Username rlo206
Uploaded July 22, 2022
Rating 4
Size 5,111 Kb
Views 38,456
Do you need developer help for Animated slider in pure angular?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Robert Lowe (rlo206) Script Codes
Name
Semantic Element Document Outline
Draggables in pure angular
Crazy Tables
Dynamic UI with AngularJS attributes
Editable Table Concept
Google Mic Icon
Fly-Through-Loader
Exploring ngForm
The Rainball
Windows 10 toggle button directive
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!