Twitter Bootstrap carousel - move indicators - css

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>

Related

Carousel ASP.net

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>

carousel overlaps to fixed nav bar when view is changed

My HTML is this:
<div class="navbar navbar-fixed-top" >
some divs inside...
</div>
<div class="filler"> </div>
<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>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="<?php print(base_url('assets/images/slide-one.jpg')); ?>" alt="First slide" />
<div class="container">
<div class="carousel-caption">
<div class="main-text">TEXT 1!</div>
<div class="sub-text">subtext</div>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="<?php print(base_url('assets/images/slide-two.jpg')); ?>" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<div class="main-text">TEXT 2</div>
<div class="sub-text">subtext </div>
</div>
</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>
CSS:
.filler {
height: 230px; //same height of class navbar.i do this so
carousel will not overlap the fixed navbar
}
The design runs OK. The top div is fixed at the top. But when I change the view to smaller or to mobile view, the carousel overlaps the fixed navbar. How will I format my css so that carousel will not overlap? Or is there another way to format this? Thank you.

Bootstrap4 Alpha Carousel JS error

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.

Twitter Bootstrap Carousel tackiness not rotating

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>

Remove carousel sliding in one page

I am using bootstrap and I want to use the carousel in one page without sliding.
I've seen this effect can be removed by setting interval to false. The problem is that I want to have a sliding carousel in my home page but not in the rest. So changing this value is not a valid solution for me.
How can I solve this???

I've found that when we add data-interval="false" it stops sliding:
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- 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>
<div class="carousel-inner">
<div class="item active">
<div class="navigationBarImg">
<img src="/Images/Pictures/1254_1.jpg" class="image-responsive" alt="First slide">
</div>
<div class="container"></div>
</div>
<div class="item">
<div class="navigationBarImg">
<img src="/Images/Pictures/1308_1.jpg" class="image-responsive" alt="Second slide">
</div>
<div class="container"></div>
</div>
<div class="item">
<div class="navigationBarImg">
<img src="/Images/Pictures/1375_1.jpg" class="image-responsive" alt="Third slide">
</div>
<div class="container"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->

Resources