AngularJS Carouse example or AngularJS banner rotation or AngularJS home page images rotation with caption and left right arrows:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="angular-ui-bootstrap@*" data-semver="0.6.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="example.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<style>
.carousel-indicators{left:50%;}
.carousel-indicators li {
background-size : 42px 22px;
width : 42px;
height: 22px;
border-radius : 0px;
text-indent : 0px;
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
}
.carousel-indicators li:nth-child(1){
background-image: url(http://cache.wallpaperdownloader.com/bing/img/WeddedRocks_20100418.jpg);
}
.carousel-indicators li:nth-child(2){
background-image: url('http://www.techbirdy.com/wp-content/uploads/2009/08/BasteiBridge_EN-US1853753543.jpg');
}
.carousel-indicators li:nth-child(3){
background-image: url('https://lh6.googleusercontent.com/-VKnkPd3FGs4/UEcffvD0u2I/AAAAAAAAAC4/Q01eBWUMNsU/w800-h800/bing-background-free-wallpaper_1920x1200_84235.jpg');
}
.carousel-indicators{left:50%;}
</style>
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<style>
</style>
<img ng-src="{{slide.imgName}}" style="margin:auto;width:835px;height:445px;" />
<div class="carousel-caption">
<p>{{slide.caption}}</p>
</div>
</slide>
</carousel>
</div>
<script>
angular.module('plunker', ['ui.bootstrap']);
function CarouselDemoCtrl($scope) {
$scope.myInterval = 5000;
var slides = $scope.slides = [{
'imgName':'http://cache.wallpaperdownloader.com/bing/img/WeddedRocks_20100418.jpg',
'caption':'Marine iguanas in the Galapagos National Park on Santa Cruz Island, on September 15, 2008.',
'author':'(Reuters/Guillermo Granja)'
},{
'imgName':'http://www.techbirdy.com/wp-content/uploads/2009/08/BasteiBridge_EN-US1853753543.jpg',
'caption':'In June of 2009, the Cerro Azul volcano on Isabela Island was in an active phase, spewing molten lava into the air, spilling it across its flanks, and widening existing lava flows.',
'author':'(Reuters/Parque Nacional Galapagos)'
},{
'imgName':'https://lh6.googleusercontent.com/-VKnkPd3FGs4/UEcffvD0u2I/AAAAAAAAAC4/Q01eBWUMNsU/w800-h800/bing-background-free-wallpaper_1920x1200_84235.jpg',
'caption':'A close-up of a pair of Booby feet, photographed in March of 2008. ',
'author':'(CC BY Michael McCullough)'
}];
}
</script>
<!--<style type="text/css">
.carousel-caption{width:59% !important; margin:0 auto;}
</style>-->
</body>
</html>
Note: you can also check the output by un commenting the css above.
Output:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="angular-ui-bootstrap@*" data-semver="0.6.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="example.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<style>
.carousel-indicators{left:50%;}
.carousel-indicators li {
background-size : 42px 22px;
width : 42px;
height: 22px;
border-radius : 0px;
text-indent : 0px;
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
}
.carousel-indicators li:nth-child(1){
background-image: url(http://cache.wallpaperdownloader.com/bing/img/WeddedRocks_20100418.jpg);
}
.carousel-indicators li:nth-child(2){
background-image: url('http://www.techbirdy.com/wp-content/uploads/2009/08/BasteiBridge_EN-US1853753543.jpg');
}
.carousel-indicators li:nth-child(3){
background-image: url('https://lh6.googleusercontent.com/-VKnkPd3FGs4/UEcffvD0u2I/AAAAAAAAAC4/Q01eBWUMNsU/w800-h800/bing-background-free-wallpaper_1920x1200_84235.jpg');
}
.carousel-indicators{left:50%;}
</style>
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<style>
</style>
<img ng-src="{{slide.imgName}}" style="margin:auto;width:835px;height:445px;" />
<div class="carousel-caption">
<p>{{slide.caption}}</p>
</div>
</slide>
</carousel>
</div>
<script>
angular.module('plunker', ['ui.bootstrap']);
function CarouselDemoCtrl($scope) {
$scope.myInterval = 5000;
var slides = $scope.slides = [{
'imgName':'http://cache.wallpaperdownloader.com/bing/img/WeddedRocks_20100418.jpg',
'caption':'Marine iguanas in the Galapagos National Park on Santa Cruz Island, on September 15, 2008.',
'author':'(Reuters/Guillermo Granja)'
},{
'imgName':'http://www.techbirdy.com/wp-content/uploads/2009/08/BasteiBridge_EN-US1853753543.jpg',
'caption':'In June of 2009, the Cerro Azul volcano on Isabela Island was in an active phase, spewing molten lava into the air, spilling it across its flanks, and widening existing lava flows.',
'author':'(Reuters/Parque Nacional Galapagos)'
},{
'imgName':'https://lh6.googleusercontent.com/-VKnkPd3FGs4/UEcffvD0u2I/AAAAAAAAAC4/Q01eBWUMNsU/w800-h800/bing-background-free-wallpaper_1920x1200_84235.jpg',
'caption':'A close-up of a pair of Booby feet, photographed in March of 2008. ',
'author':'(CC BY Michael McCullough)'
}];
}
</script>
<!--<style type="text/css">
.carousel-caption{width:59% !important; margin:0 auto;}
</style>-->
</body>
</html>
Note: you can also check the output by un commenting the css above.
Output:
No comments:
Post a Comment