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
Related
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.
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();
It seems quite challenging to add both the Bootstrap Carousel Slider and
Lightbox Gallery in a single page without significant issues.
Problem: When clicking on the lightbox image gallery it opens up the picture gallery and at the same time the Carousel slider image gets hijacked by the gallery images. The culprit seems to be either the classes: .item, img, or .inner-carousel
Is it possible to add both modal lighbox and carousel slider to a single page without any issues?
To recreate the issue: Click on the image gallery, the modal will pop up, close the window, and now the carousel slider has been replaced by the gallery images. http://jsfiddle.net/2aasoyej/
HTML:
<div class="container">
<div class="row">
<h1>Bootstrap 3 lightbox hidden gallery using modal</h1>
<hr>
<div class="row">
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 1" href="#">
<img class="thumbnail img-responsive" id="image-1" src="http://dummyimage.com/600x350/ccc/969696&text=0xD10x810xD00xB50xD10x800xD10x8B0xD00xB9">
</a>
</div>
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 2" href="#">
<img class="thumbnail img-responsive" id="image-2" src="http://dummyimage.com/600x350/2255EE/969696&text=0xD10x810xD00xB80xD00xBD0xD00xB80xD00xB9">
</a>
</div>
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 3" href="#">
<img class="thumbnail img-responsive" id="image-3" src="http://dummyimage.com/600x350/449955/FFF&text=0xD00xB70xD00xB50xD00xBB0xD00xB50xD00xBD0xD10x8B0xD00xB9">
</a>
</div>
</div>
<hr>
</div>
</div>
<div class="hidden" id="img-repo">
<!-- #image-1 -->
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 11" src="http://dummyimage.com/600x350/ccc/969696">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 12" src="http://dummyimage.com/600x600/ccc/969696">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 13" src="http://dummyimage.com/300x300/ccc/969696">
</div>
<!-- #image-2 -->
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x350/2255EE/969696">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x600/2255EE/969696">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 23" src="http://dummyimage.com/300x300/2255EE/969696">
</div>
<!-- #image-3-->
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 31" src="http://dummyimage.com/600x350/449955/FFF">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 32" src="http://dummyimage.com/600x600/449955/FFF">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 33" src="http://dummyimage.com/300x300/449955/FFF">
</div>
</div>
<div class="modal" id="modal-gallery" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div id="modal-carousel" class="carousel">
<div class="carousel-inner">
</div>
<a class="carousel-control left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#modal-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');">
<center>
<div class="carousel-title">
<h1>Certified General Contractor</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>For all your South Florida construction needs</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');">
<center>
<div class="carousel-title">
<h1>Commercial Contruction</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>Build with a company you can trust</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');">
<center>
<div class="carousel-title">
<h1>Home Renovation</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>Remodel your home with the best in the field</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev" style="font-size:70px;"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next" style="font-size:70px;"></span>
</a>
JS:
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
$('.carousel').carousel({
interval: 6000,
pause: "false"
});
In the $(".row .thumbnail").click(function() you are querying $('.carousel-inner') which infact matches both carousels' .carousel-inner
$(".row .thumbnail").click(function(){
var content = $(".carousel-inner");
..and then you call content.empty() and content.append(repoCopy). This does affect both carousels, too, of course.
You need to be more precise here:
$(".row .thumbnail").click(function(){
var content = $("#modal-carousel .carousel-inner");
Here's the updated fiddle: http://jsfiddle.net/2aasoyej/1/
Udated fiddle that properly disables the interval for the modal carousel, as noted in comments below: http://jsfiddle.net/2aasoyej/4/
I'm building a website using Bootstrap but I can't make the carousel work at all, the left and right nor the indicator will change the slide.
<div id="slideshow" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#slide0" data-slide-to="0" class="active"></li>
<li data-target="#slide1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- 1st slide -->
<div class="item active" id="slide0">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6" >
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
<!-- second slide -->
<div class="item" id="slide1">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6" >
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#slideshow" data-slide="prev">‹</a>
<a class="carousel-control right" href="#slideshow" data-slide="next">›</a>
</div>
this is the html markup, the carousel is displayed corretly and the slideshow work automatically but I can't go to the next/prev slide.
I tried to include this script:
$('.carousel').carousel({
interval: 3000
})
$('.carousel-control.left').click(function() {
$('#slide').carousel('prev');
});
$('.carousel-control.right').click(function() {
$('#slide').carousel('next');
});
still no luck, and yes bootstrap.js is linked to the html.
Any advice?
<ol class="carousel-indicators">
<li data-target="#slide0" data-slide-to="0" class="active"></li>
<li data-target="#slide1" data-slide-to="1"></li>
</ol>
The indicators are not working cause the data-target is the id of carousel not slide.
data-target="#slideshow"
Your controls are outside the div#slideshow, remove the </div> just before the controls html code
You have a tag '</div>' unusefull just before 'Carousel Nav' comment :
Bootply : http://www.bootply.com/zqAmnp3ekY
Code :
<div id="slideshow" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#slide0" data-slide-to="0" class="active"></li>
<li data-target="#slide1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- 1st slide -->
<div class="item active" id="slide0">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6">
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
<!-- second slide -->
<div class="item" id="slide1">
<div id="mainFeature">
<div class="col-lg-6 col-lg-offset-1 col-md-6">
<img class="screenshot">
</div>
<div class="col-lg-4 alta">
<h2>heading</h2>
<p class="lefted">some text</p>
<p class="lefted">other text</p>
</div>
</div>
</div>
</div>
<!-- </div> COMMENT THIS LINE-->
<!-- Carousel nav -->
<a class="carousel-control left" href="#slideshow" data-slide="prev">‹</a>
<a class="carousel-control right" href="#slideshow" data-slide="next">›</a>
</div>
I am using Twitter Bootstrap 3 and have got a carousel working of 8 images. It shows 4, then jumps to the next 4. At the moment, one must use the left and right arrow buttons (or wait a few moments) for the carousel to change. How can I make it so there is a continuous, slow scroll through the items in the carousel? I don't want it to jump from set of 4 to the next, I want a continuous scroll.
The first thing you need to do is copy and paste the following code into your HTML file. You’re encouraged to change the carousel-example-generic id to something more unique. If you do, make sure to reference it properly throughout the markup. We also used placeholder images that you’ll need to replace with your desired slider images.
http://jsfiddle.net/2qWy8/21/
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
<li data-target="#carousel-example-generic" data-slide-to="6"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
There is also solution with JS, but tell me and i will edit my answer, is this what you need?
UPDATE
Then use another widget, not this one
Here is reference to plugin
http://www.codicode.com/demo/endless_scroll/\
Use like this
$(window).load(function () {
$("#divID").endlessScroll({ width: '100%', height: '100px', steps: -2, speed: 40, mousestop: true });
});