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.
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 have a dynamic slider with botstrap in asp.net MVC; But I can not move it in touch.I use some sample jQuery Code for enable touch but it's important to me chose first pic of Slider automatically!
this is my HTML Code For dynamic Slider.
#model IEnumerable<MyProject.Models.DataSource.Sliders>
#if (Model.Any())
{
<section class="banner parallax-fix parallaximg">
<div class="container-fluid pr">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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">
#foreach (var item in Model)
{
if (item.IsFirst == true)
{
<div class="item active">
<a onclick="SliderCounter(#item.SliderID)"
href="#item.SliderLink"
target="_blank">
<img src="~/images/Slider/#item.SliderImage"
alt="#item.SliderTitle"
style="width:100%;">
</a>
</div>
}
else
{
<div class="carousel-item item">
<a onclick="SliderCounter(#item.SliderID)"
href="#item.SliderLink"
target="_blank">
<img src="~/images/Slider/#item.SliderImage"
alt="#item.SliderTitle"
style="width:100%;">
</a>
</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>
</section>
}
if you have another way for touchable and dynamic slider please help me!
My carousel picture show works well when placed inside Site.Master, but the same markup inside the Content element of an .aspx file that uses Site.Master (without the carousel snippet) displays only the alt text for each image that it cycles through.
Environment: Win10 Pro, Visual Studio 2017 Community 15.4.4, bootstrap 3.0.0
Here is the carousel snippet:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
<!-- Images-->
<div class="carousel-inner" role="listbox">
<div class="item carousel-item active">
<img src="1945_DeHavilland_Canada_DH-98_Mosquito_FBMK26.jpg" alt="Slide #1">
</div>
<div class="item carousel-item">
<img src="1969_Aerovodochody_L-29_DELFIN.jpg" alt="Slide #2">
</div>
<div class="item carousel-item">
<img src="737BahamasAir.jpg" alt="Slide #3">
</div>
</div>
<!-- Left Right Arrows -->
<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>
If the file you are using the display the carousel is inside of a subfolder, example:
/wwwroot/Content/file.aspx
Then you would have to set the image source to ../example_image.jpg (or wherever the image is stored, in this case, the image is in your web root folder.
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 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>