I have a twitter Bootstrap carousel that I am trying to use within wordpress and it is stacking all the pictures on top of each other and doesn't rotate.
You can view it and see what I mean here.
My code looks like this:
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://i0.wp.com/www.cattywampur.com/wp-content/uploads/2016/03/8566819595_0f567e8594_k.jpg" >
<div class="carousel-caption">
<h3>Traversing the Grand Canyon</h3>
</div>
</div>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://i2.wp.com/www.cattywampur.com/wp-content/uploads/2016/05/26300985983_713ab03dc1_k.jpg" >
<div class="carousel-caption">
<h3>San Jacinto - Deer Springs Trail</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" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
You only need one carousel-inner.
And one item set to active.
That way they don't stack and have the same wrapper.
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://i0.wp.com/www.cattywampur.com/wp-content/uploads/2016/03/8566819595_0f567e8594_k.jpg">
<div class="carousel-caption">
<h3>Traversing the Grand Canyon</h3>
</div>
</div>
<div class="item">
<img src="http://i2.wp.com/www.cattywampur.com/wp-content/uploads/2016/05/26300985983_713ab03dc1_k.jpg">
<div class="carousel-caption">
<h3>San Jacinto - Deer Springs Trail</h3>
</div>
</div>
</div>
Related
I'm having problems with making the carousel work on ASP.net page; the same code works on some other project, but it doesn't work in mine; is there something I might be missing?
I tried moving stuff around but it won't work, is it perhaps I haven't installed bootstrap properly?
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/images/BBQBeefRe.jpeg" alt="BBQ Beef" class="img-responsive" style="width:100%; " />
<div class="carousel-caption" role="option">
<h2>
BBQ Beef
</h2>
</div>
</div>
<div class="item">
<img src="~/images/ChiPiRe.jpg" alt="Chicken Pineapple" class="img-responsive" style="width:100%" />
<div class="carousel-caption" role="option">
<h2>
Chicken Pineapple
</h2>
</div>
</div>
<div class="item">
<img src="~/images/PepRe.jpg" alt="Pepperoni" class="img-responsive" style="width:100%" />
<div class="carousel-caption" role="option">
<h2>
Pepperoni
</h2>
</div>
</div>
<div class="item">
<img src="~/images/Vegre.jpg" alt="Vegetarian" class="img-responsive" style="width:100%" />
<div class="carousel-caption" role="option">
<h2>
Vegetarian
</h2>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I'm using Bootstraps JS CDN.
The code below is directly copied from there docs.
http://v4-alpha.getbootstrap.com
But I get this error and the slides don't change.
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined(…)
<div class="col-lg-8 offset-lg-2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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" role="listbox">
<div class="carousel-item active">
<img src="http://lorempixel.com/1200/600" alt="First slide">
</div>
<div class="carousel-item">
<img src="http://lorempixel.com/1200/600" alt="Second slide">
</div>
<div class="carousel-item">
<img src="http://lorempixel.com/1200/600" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Thanks for this helped me figure out why. Basically I was been and idiot and not using the correct CDN.
i have a code about bootstrap carousel and it works perfectly however I want to align it on the center of my page. i tried so many different solutions but still no avail. is there any way to align this to the center
<div class="container">
<br>
<div class = "row">
<div id="myCarousel" class="carousel slide" data-ride="carousel ">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="css/pet9.jpg" alt="Chania">
</div>
<div class="item">
<img src="css/pet10.jpg" alt="Chania">
</div>
<div class="item">
<img src="css/pet8.jpg" alt="Flower" >
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
You can surround it with the <center> tag.
Is there a possibility to stop the autoslide when im on my mobile view.
If it´s possible with css... maybe with mediaquery xs and than manipulate a carousel element ...?
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- LOGO -->
<div class="container">
<div class="row logo">
<div class="col-lg-12 col-sm-8 col-xs-12"><img class="img-responsive" src="img/logo.png" alt=""/></div>
</div>
</div>
<!-- POINTS -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<!-- SLIDEWRAPPER -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/headbild-1.jpg" alt="headbild1">
</div>
<div class="item">
<img src="img/headbild-2.jpg" alt="headbild2">
</div>
<div class="item">
<img src="img/headbild-1.jpg" alt="headbild3">
</div>
<div class="item">
<img src="img/headbild-2.jpg" alt="headbild4">
</div>
</div>
<!-- PREV/NEXT Controls -->
<div class="container hidden-xs">
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="previcon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control pull-right" href="#carousel" role="button" data-slide="next">
<span class="nexticon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
well to stop autoslide on a mobile device you would need to adjust your javascript / the init from the carousel in a different media query.
do you have a possibility to check your media screen size in js? if yes, simply destroy your carousel (sth like $('#carousel').destroy();) and reinit without the autoslide.
I am trying to move my carousel indicators beneath the carousel. I've tried a few tips on the web to no avail.
I tried bottom with a negative value, but no good.
Any suggestions?
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/bootstrap-3.1.1/images/carousel-1.jpg" alt="...">
<div class="carousel-caption">
ATS International Conference
</div>
</div>
<div class="item">
<img src="/bootstrap-3.1.1/images/carousel-1.jpg" alt="...">
<div class="carousel-caption">
ATS International Conference
</div>
</div>
<div class="item">
<img src="/bootstrap-3.1.1/images/carousel-1.jpg" alt="...">
<div class="carousel-caption">
ATS International Conference
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
You can insert your indicators where you want...
Bootply : http://www.bootply.com/SZqnwXVQ71
CSS:
.carousel-indicators{
position:relative;
background:grey;
height:25px;
bottom:0px;
}
.carousel-control{
margin-bottom:25px; // Same height as indicators
}
HTML :
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/bootstrap-3.1.1/images/carousel-1.jpg" alt="...">
<div class="carousel-caption">
ATS International Conference
</div>
</div>
<div class="item">
<img src="/bootstrap-3.1.1/images/carousel-1.jpg" alt="...">
<div class="carousel-caption">
ATS International Conference
</div>
</div>
<div class="item">
<img src="/bootstrap-3.1.1/images/carousel-1.jpg" alt="...">
<div class="carousel-caption">
ATS International Conference
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- Indicators JUST MOVE IT DOWN-->
<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>