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>
Related
I'll preface this by saying I really don't have much experience in this, but I've looked through documentations and solutions that helped others and I've yet to fix my issue so I'll go ahead and make my own post.
<div id="randomCarousel" class="carousel slide" data-ride="carousel">
<!--Indicator Buttons-->
<ol class="carousel-indicators">
<li data-target="#randomCarousel" data-slide-to="0" class="active"></li>
<li data-target="#randomCarousel" data-slide-to="1"></li>
<li data-target="#randomCarousel" data-slide-to="2"></li>
</ol>
<!--Carousel w/Images-->
<div class="container">
<div class="carousel-inner">
<!--ALL PICS ARE PART OF CREATIVE COMMONS; ADDED SIMPLY FOR FUN-->
<div class="carousel-item active">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
</div>
</div>
</div>
<!--Next and Previous buttons-->
<a class="carousel-control-prev" href="#randomCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#randomCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I've gone ahead and added scripts and links found on the bootstrap website also but to no avail. Any additional feedback would also be greatly appreciated.
I'm not sure what is the issue with your code, But when i customize my code then it will worked. Please review my code and let me know further clarification.
Hope it will help
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="carousel-indicators" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-indicators" data-slide-to="0" class="active"></li>
<li data-target="#carousel-indicators" data-slide-to="1"></li>
<li data-target="#carousel-indicators" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="container">
<div class="carousel-inner">
<div class="item active">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
</div>
</div>
</div>
</div>
<!--Next and Previous buttons-->
<a class="carousel-control-prev" href="#randomCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#randomCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Your code is working fine, may be you forgot to include bootstrap library files (CSS and JS) or may be forgot to include js library file. Not sure exactly what you are missing.
Here is the working example of your code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="randomCarousel" class="carousel slide" data-ride="carousel">
<!--Indicator Buttons-->
<ol class="carousel-indicators">
<li data-target="#randomCarousel" data-slide-to="0" class="active"></li>
<li data-target="#randomCarousel" data-slide-to="1"></li>
<li data-target="#randomCarousel" data-slide-to="2"></li>
</ol>
<!--Carousel w/Images-->
<div class="container">
<div class="carousel-inner">
<!--ALL PICS ARE PART OF CREATIVE COMMONS; ADDED SIMPLY FOR FUN-->
<div class="carousel-item active">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
</div>
</div>
</div>
<!--Next and Previous buttons-->
<a class="carousel-control-prev" href="#randomCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#randomCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
https://codepen.io/pgurav/pen/KKKxBwM
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>
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>