El carrusel de imágenes adaptables con angular. js y bootstrap 3

Vista prévia

Descripción

Una presentación por secuencia de imagen totalmente adaptable que le permite recorrer varios grupos de imágenes.

Características

• Diseño adaptable para dispositivos móviles y de escritorio.
• Navegación de puntos y flechas.
• Las imágenes se pueden clasificar en varios grupos.
• Bucle infinito al llegar a la última diapositiva.
• Auto-rotación con soporte para pausa en Hover.

Dependencies:

• Angular
• Biblioteca de jQuery
• Bootstrap 3

Funcionamiento

Incluya el CSS de bootstrap en la sección Head de su documento.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

Incluya la biblioteca de jQuery, bootstrap de JavaScript y angular. js en la parte inferior del documento.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>

Cree la estructura HTML para el carrusel de imágenes.

<div ng-app="carousel">

<div class="container" ng-controller="folderCtrl">


 <!-- Carousel




================================================== -->


<div id="myCarousel" class="carousel slide" data-ride="carousel">



 <!-- Indicators -->



<ol class="carousel-indicators">




<li data-target="#myCarousel" ng-repeat="img in images" class="{active : (img === 0)}" data-slide-to="{{img}}"></li>



</ol>



<div class="carousel-inner">




<div ng-class="{item: true, active : (img === 0)}" ng-repeat="img in images"> <img ng-src="{{uri}}/{{w}}/{{h}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}">





<div class="container">






<div class="carousel-caption"> </div>





</div>




</div>



</div>



<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div>


<!-- /.carousel -->



 <!-- Fixed navbar -->


<div class="navbar navbar-default navbar-fixed-botom" role="navigation">



<div class="container">




<div class="navbar-collapse collapse">





<ul class="nav navbar-nav">






<li ng-repeat="folder in folders" class="{{activeFolder(folder)}}" ng-click="selectFolder(folder)"> <a ng-href="#{{folder}}">{{folder}}</a> </li>





</ul>




</div>




<!--/.nav-collapse -->



 </div>


</div>

</div>
</div>

Active el carrusel de imágenes y establezca las fuentes de imagen en JavaScript.

var app = angular.module('carousel', []);
app.controller('folderCtrl', function ($scope, $http) {

$scope.w = window.innerWidth;

$scope.h = window.innerHeight-20;

$scope.uri = "http://lorempixel.com";

$scope.folders = [


'abstract',


'animals',


'business',


'cats',


'city',


'food',


'night',


'life',


'fashion',


'people',


'nature',


'sports',


'technics',


'transport'

];

$scope.images = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];


$scope.currentFolder = $scope.folders[0];

$scope.selectFolder = function (folder) {


$scope.currentFolder = folder;

};

$scope.activeFolder = function (folder) {


return (folder === $scope.currentFolder) ? 'active' : '';

};
});