Last active
December 5, 2018 12:28
-
-
Save danielyewright/c1428eb375a16fb7a66781eca47e460b to your computer and use it in GitHub Desktop.
AngularJS Slideshow
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var myApp = angular.module('myApp', []); | |
| myApp.controller('SlideshowCtrl', ['$scope', | |
| function ($scope) { | |
| $scope.images = [ | |
| { | |
| src: 'img_nature_wide.jpg', | |
| title: 'Caption One' | |
| }, | |
| { | |
| src: 'img_snow_wide.jpg', | |
| title: 'Caption Two' | |
| }, | |
| { | |
| src: 'img_mountains_wide.jpg', | |
| title: 'Caption Three' | |
| } | |
| ]; | |
| } | |
| ]); | |
| myApp.directive('slideshow', ['$timeout', | |
| function ($timeout) { | |
| return { | |
| restrict: 'AE', | |
| replace: true, | |
| scope: { | |
| images: '=' | |
| }, | |
| templateUrl: 'template.html', | |
| link: function (scope, elem, attrs) { | |
| scope.currentIndex = 0; | |
| scope.nextSlide = function() { | |
| scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0; | |
| } | |
| scope.prevSlide = function() { | |
| scope.currentIndex > 0 ? scope.currentIndex-- : scope.currentIndex = scope.images.length - 1; | |
| } | |
| scope.dotNav = function(index) { | |
| scope.currentIndex = index; | |
| } | |
| scope.$watch('currentIndex', function() { | |
| scope.images.forEach(function(image) { | |
| image.visible = false; | |
| }); | |
| scope.images[scope.currentIndex].visible = true; | |
| }); | |
| var timer; | |
| var sliderFunc = function() { | |
| timer = $timeout(function() { | |
| scope.nextSlide(); | |
| timer = $timeout(sliderFunc, 3000); | |
| }, 3000); | |
| }; | |
| sliderFunc(); | |
| scope.$on('$destroy', function() { | |
| $timeout.cancel(timer); | |
| }); | |
| } | |
| } | |
| } | |
| ]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: Verdana, sans-serif; | |
| margin:0; | |
| } | |
| img { | |
| vertical-align: middle; | |
| } | |
| /* Slideshow container */ | |
| .slideshow-container { | |
| max-width: 1000px; | |
| position: relative; | |
| margin: auto; | |
| } | |
| /* Next & previous buttons */ | |
| .prev-slide, | |
| .next-slide { | |
| cursor: pointer; | |
| position: absolute; | |
| top: 50%; | |
| width: auto; | |
| padding: 16px; | |
| margin-top: -22px; | |
| color: white; | |
| font-weight: bold; | |
| font-size: 18px; | |
| transition: 0.6s ease; | |
| border-radius: 0 3px 3px 0; | |
| user-select: none; | |
| } | |
| /* Position the "next button" to the right */ | |
| .next-slide { | |
| right: 0; | |
| border-radius: 3px 0 0 3px; | |
| } | |
| /* On hover, add a white background color with a little bit see-through */ | |
| .prev-slide:hover, | |
| .next-slide:hover { | |
| background-color: rgba(255,255,255,0.5); | |
| } | |
| /* Caption text */ | |
| .text { | |
| color: #f2f2f2; | |
| font-size: 15px; | |
| padding: 8px 12px; | |
| position: absolute; | |
| bottom: 8px; | |
| width: 100%; | |
| text-align: center; | |
| } | |
| /* Number text (1/3 etc) */ | |
| .numbertext { | |
| color: #f2f2f2; | |
| font-size: 12px; | |
| padding: 8px 12px; | |
| position: absolute; | |
| top: 0; | |
| } | |
| /* The dots/bullets/indicators */ | |
| .dot { | |
| cursor: pointer; | |
| height: 15px; | |
| width: 15px; | |
| margin: 0 2px; | |
| background-color: #bbb; | |
| border-radius: 50%; | |
| display: inline-block; | |
| transition: background-color 0.6s ease; | |
| } | |
| .active, | |
| .dot:hover { | |
| background-color: #717171; | |
| } | |
| .inactive { | |
| background-color: #bbb; | |
| } | |
| /* Fading animation */ | |
| .fade { | |
| -webkit-animation-name: fade; | |
| -webkit-animation-duration: 1.5s; | |
| animation-name: fade; | |
| animation-duration: 1.5s; | |
| } | |
| @-webkit-keyframes fade { | |
| from {opacity: .4} | |
| to {opacity: 1} | |
| } | |
| @keyframes fade { | |
| from {opacity: .4} | |
| to {opacity: 1} | |
| } | |
| /* On smaller screens, decrease text size */ | |
| @media only screen and (max-width: 300px) { | |
| .prev-slide, | |
| .next-slide, | |
| .text {font-size: 11px} | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" ng-app="myApp" ng-controller="SlideshowCtrl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="css.css"> | |
| </head> | |
| <body> | |
| <div slideshow images="images"></div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <div class="slideshow-container"> | |
| <div class="fade" ng-repeat="image in images" ng-show="image.visible"> | |
| <div class="numbertext">{{$index + 1}} / {{images.length}}</div> | |
| <img ng-src="{{image.src}}" style="width:100%"> | |
| <div class="text">{{image.title}}</div> | |
| </div> | |
| <a class="prev-slide" ng-click="prevSlide()">❮</a> | |
| <a class="next-slide" ng-click="nextSlide()">❯</a> | |
| </div> | |
| <br> | |
| <div style="text-align:center"> | |
| <span class="dot" ng-repeat="dot in images track by $index" ng-class="{'active' : dot.visible}" ng-click="dotNav($index)"></span> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment