Total 20 Images, I have to show 9 items in each slider so total 3 slider.
I tried this following link
Four items in bootstrap carousel Ng repeat?
<div class='greybg' ng-repeat="comment in location.comments">
<div class="row">
<div id="myCarousel{{location.comments[0]._id}}" class="carousel slide" data-ride="carousel">
<div class="carousel-inner multiple_pictures" >
<div class="item" ng-class="{active:!$index}">
<div class="row" >
<div class="col-sm-4" ng-repeat="images in comment.images.slice(0,9)">
<img ng-src={{images.path}} alt="First slide"> <div class="gplabel">{{$index+1}}</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4" ng-repeat="images in comment.images.slice(9,18)">
<img ng-src={{images.path}} alt="First slide"> <div class="gplabel">{{$index+1+9}}</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4" ng-repeat="images in comment.images.slice(18,27)">
<img ng-src={{images.path}} alt="First slide"> <div class="gplabel">{{$index+1+18}}</div>
</div>
</div>
</div>
<a ng-if="comment.images.length>1" class="left carousel-control" href="#myCarousel{{location.comments[0]._id}}" role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a ng-if="comment.images.length>1" class="right carousel-control" href="#myCarousel{{location.comments[0]._id}}" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div></div></div>
But the image count will be dynamical so If am having 50 image means 6 times I have to write. How do i do this dynamically based upon image count.
Related
Below is my carousel slider inside repeater which is not working.
<div class="col-md-4">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="upload-h4">
<h4>Mark Attendance</h4>
</div>
<div class="carousel-inner">
<asp:Repeater ID="Repeater_Attendance" runat="server">
<ItemTemplate>
<div class="item active">
<img src="Trainer_Images/attendance1.jpg" class="img-responsive" alt="">
<div class="carousel-caption caption-bg">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">Submitted Date:</div>
<div class="col-md-8">01/11/2019</div>
<div class="col-md-4">Latitude:</div>
<div class="col-md-8">17.4428449</div>
<div class="col-md-4">Longitute:</div>
<div class="col-md-8">78.47995379999998</div>
<div class="col-md-4">Event Type:</div>
<div class="col-md-8">Mark Attendance</div>
</div>
</div>
</div>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div class="item">
<img src="Trainer_Images/attendance2.jpg" class="img-responsive" alt="">
<div class="carousel-caption caption-bg">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">Submitted Date:</div>
<div class="col-md-8">02/11/2019</div>
<div class="col-md-4">Latitude:</div>
<div class="col-md-8">17.4428449</div>
<div class="col-md-4">Longitute:</div>
<div class="col-md-8">78.47995379999998</div>
<div class="col-md-4">Event Type:</div>
<div class="col-md-8">Mark Attendance</div>
</div>
</div>
</div>
</div>
</AlternatingItemTemplate>
</asp:Repeater>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Below is my html slider which working fine.
<div class="col-md-4">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="upload-h4">
<h4>Mark Attendance</h4>
</div>
<div class="carousel-inner">
<div class="item active">
<img src="Trainer_Images/attendance1.jpg" class="img-responsive" alt="">
<div class="carousel-caption caption-bg">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">Submitted Date:</div>
<div class="col-md-8">01/11/2019</div>
<div class="col-md-4">Latitude:</div>
<div class="col-md-8">17.4428449</div>
<div class="col-md-4">Longitute:</div>
<div class="col-md-8">78.47995379999998</div>
<div class="col-md-4">Event Type:</div>
<div class="col-md-8">Mark Attendance</div>
</div>
</div>
</div>
</div>
<div class="item">
<img src="Trainer_Images/attendance2.jpg" class="img-responsive" alt="">
<div class="carousel-caption caption-bg">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">Submitted Date:</div>
<div class="col-md-8">02/11/2019</div>
<div class="col-md-4">Latitude:</div>
<div class="col-md-8">17.4428449</div>
<div class="col-md-4">Longitute:</div>
<div class="col-md-8">78.47995379999998</div>
<div class="col-md-4">Event Type:</div>
<div class="col-md-8">Mark Attendance</div>
</div>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I am getting below image output when i will use using repeater but using html working fine.
Please help i am trying using repeater for dynamic fetching data of images please help to out this issue thank you very much.
To display dynamic data, a repeater must be bound to some sort of data source for that dynamic data, and your code doesn't show where you are doing that. If you are, you should add that code to your question.
If you are not binding to a data source, that's probably why nothing is showing up. Without a data source, no items are ever getting added to the repeater, and the ItemTemplate will never be used, so you won't see any of that content from the ItemTemplate.
I am using bootstrap carousel thumbnail. Currently the slider clone after complete the last slider . I need to stop repeating item when my slider count less than 3. I have tried the below script. Anyone help me to achieve this .
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="images/homogeneous/marvel-stone/marvel-stone-detail.jpg" alt="">
</div>
</div>
</div>
<div class="clearfix">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb1.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb2.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb3.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb4.png" alt=""></div>
</div>
</div>
<!-- /carousel-inner -->
<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>
<!-- /myCarousel -->
</div>
<!-- /clearfix -->
below script I wast tried for 3 items. How to make it for one and two items with simplified script.
$('#myCarousel').carousel({
interval: false
});
var totalItems = $('.item').length;
if (totalItems > 3) {
//alert();
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this)).addClass('rightest');
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
} else {
//what to be here
}
[my code link]
you might be missing some css, try experiment with this code:
https://www.bootply.com/124854#
I am trying to call this JavaScript function in my Angular JS controller below. The carousel buttons will not work like the example from this site http://www.bootply.com/1DtSbhZQtI. Where is my error in the JavaScript? Thanks.
var myCarousel = function() {
$('#myCarousel').on('slid.bs.carousel')};
myCarousel();
This is in order to run a thumbnail carousel on my html file, here is the code for the html.
<div class="col-md-6">
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3"><img src="images/StaticBarHeadcountHorizontal.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/StaticBarHeadcountVertical.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/StaticGroupedHeadcount.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/TrendBarHeadcount.png" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-sm-3"><img src="images/TrendDonutHeadcount.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/TrendLineHeadcount.png" alt="Image" class="img-responsive">
</div>
<div class="col-sm-3"><img src="images/TrendLinePercentofTotalHeadcount.png" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
</div>
<!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
I think this is not related to angular, you just need to create the carousel with:
$('#myCarousel').carousel();
i need to a solution.
Now i have product with main image and some other photos under it.
If photos are more than 3, i need to show them like carousel, not like no in rows by 3.
Attaching img, to explain it more.
*4th,5th etc photo should be hidden in carousel.
*All images should popup if they are clicked.
You can possibly do it with Bootstrap but you need to do a bit of workaround since it is not available out of the box.
Suppose this is your HTML :
<div class="col-md-7">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-4"><img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
Workaround JavaScript :
$('#myCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
Working demo here : http://jsfiddle.net/6ouybst4/
Now help yourself and implement lightbox in it :-)
My nav bar is not behaving correctly. It displays the 3 slider images all in a vertical row at the same time and doesn't slide through the pictures. The CSS used is that of twitter bootstrap. I have my own CSS in there but none that affect the carousel, also no added javascript, just the Jquery and the bootstrap.js. This is the bootstrap V3. any idea?
<div class="container">
<div id="carousel-example-generic" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-
slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-
slide-to="1"></li>
<li data-target="#carousel-example-generic" data-
slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-
example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-
example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Your issue seems to be that you have specified active class for all the slides. Specify only for the first one to start with. Specifying active for all of them makes all of them visible and its selector which switches through the slides (not active item which is prev or next on click of buttons fails to pick up anything else) fails to select as there is nothing with non active is available anymore.
<div class="item active">
<img src="http:\\placehold.it\32x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item"> <!-- removed active class from here -->
<img src="http:\\placehold.it\42x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item"><!-- removed active class from here -->
<img src="http:\\placehold.it\52x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
Fiddle