AnisB
/
monarch-living2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

slider

Browse Source
master
Viiciouss 8 years ago
parent 11995c3160
commit b87a7e1dcd
3 changed files with 70 additions and 16 deletions
Show Stats Download Patch File Download Diff File

53
app/index.html
Unescape Escape View File

@ -73,6 +73,45 @@
<div class="header-content-inner">
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee</p>
<hr>
<div class="container">
<div class="row">
<div class="col-md-10">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner" id="furnitures" ng-controller="ngrCtrl">
<div class="item active">
<div class="col-xs-2"><a href="#1"><img src="/img/2.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-2"><a href="#1"><img src="/img/5.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-2"><a href="#1"><img src="/img/12.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-2"><a href="#1"><img src="/img/13.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-2"><a href="#1"><img src="/img/14.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-2"><a href="#1"><img src="/img/17.jpg" class="img-responsive"></a></div>
</div>
<!-- add more items here -->
<!-- Example item start: -->
<div class="item">
<div class="col-xs-2"><a href="#1"><img src="/img/27.jpg" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" >
@ -89,20 +128,6 @@
</div>
</header>
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-md-12" >
<div class="row" id="furnitures" ng-controller="ngrCtrl">
<!--<div ng-repeat="toto in collection">{{ collection[$index].titre }}-->
<items ng-repeat="furnitures in collection"></items>
</div>
</div>
</div>
</div>
</section>

24
app/scripts/main.js
Unescape Escape View File

@ -61,4 +61,28 @@ monarchLiving.directive('items', function(){
monarchLiving.controller('ngrCtrl', function($scope){
$scope.collection = ['img/2.jpg', 'img/5.jpg', 'img/9.jpg','img/12.jpg', 'img/13.jpg', 'img/20.jpg', 'img/27.jpg', 'img/8.jpg', 'img/14.jpg', 'img/17.jpg', 'img/19.jpg', 'img/24.jpg'];
});
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: 4000
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<4;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});

9
app/templates/items.html
Unescape Escape View File

@ -1,6 +1,11 @@
<div class="col-sm-2 col-md-2">
<!--<div class="col-sm-2 col-md-2">
<a href="#" class="thumbnail">
<img ng-src="{{furnitures}}" alt="...">
</a>
</div>
</div>-->
<div class="item active">
<div class="col-xs-2"><a href="#1"><img ng-src="{{furnitures}}" class="img-responsive"></a></div>
</div>
Write Preview
Loading…
Cancel
Save