Bootstrap carousel navigation controls too tall - html

I have a Bootstrap carousel but the left and right navigation control overflow at the bottom of the carousel after the bottom of the image.
Any way to get rid of this overflow of the navigation arrows?
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="/freshers2015">
<img src="/files/2015/06/journosoc-prefreshers-web.png" alt="First slide"/>
</a>
</div>
<div class="item">
<img src="/files/2015/06/whatjourno.png" alt="Second slide"/>
</div>
</div>
<a class="left carousel-control" href="#carousel" 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" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Related

Carousel indicators not displaying or moving onto next image in slide

As Select my indicators to move onto the next section of the slide
show, upon clicking it does not work. is there any reason to why this
is not working
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class ="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner active">
<div class="carousel-item">
<img src ="img/background.png">
</div>
<div class="carousel-item">
<img src ="img/background2.png">
</div>
</div>
<a class="carousel-control-prev" href="#slides" 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="#slides" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span>
</a>
</div>

all you need to do is, just add some color on active slide's indicator, I have used your code, and aaded a single line in css, and you can see the result.
body {background: #333 !important;}
.carousel-indicators {
bottom: -50px !important;
}
.carousel-indicators li.active {background: red;}
.carousel-item {color: white; font-size: 80px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.0/umd/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class ="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner active">
<div class="carousel-item active">
1
</div>
<div class="carousel-item">
222
</div>
<div class="carousel-item">
3333
</div>
</div>
<a class="carousel-control-prev" href="#slides" 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="#slides" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span>
</a>
</div>

Bootstrap carousel error, only active image appears

Ok so, I was following this tutorial on YT, and everything is fine so far, except carousel is showing only the active image, and wont switch to others. I checked the code multiple times, everything is on place, but it just won't work. Please answer if you know what's wrong, I'll appreciate it so much! :)
Here is the code:
<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="img/mountains.png">
<div class="carousel-caption">
<h1>Lorem Ipsum</h1>
<br>
<button type="button" class="btn btn-default">Lorem Ipsum</button>
</div>
</div> <!-- Kraj active slajdera -->
<div class="item">
<img src="img/snow.png">
</div>
<div class="item">
<img src="img/red.png">
</div>
</div>
<!-- Strelice Pocetak -->
<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> <!--Kraj slajdera -->

From you example if you have added the bootstrap assest and jquery , and the <div id="myCarousel" class="carousel slide" data-ride="carousel"> every thing should work fine :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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="https://www.moroccoworldnews.com/wp-content/uploads/2015/09/moroccan-Sahara.jpg">
<div class="carousel-caption">
<h1>Lorem Ipsum</h1>
<br>
<button type="button" class="btn btn-default">Lorem Ipsum</button>
</div>
</div> <!-- Kraj active slajdera -->
<div class="item">
<img src="http://www.dempos.com/wp-content/uploads/2015/07/Home-Company-Dempo-Travels.jpg">
</div>
<div class="item">
<img src="https://www.moroccoworldnews.com/wp-content/uploads/2015/09/moroccan-Sahara.jpg">
</div>
</div>
<!-- Strelice Pocetak -->
<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>

Removing the right and left side dark areas from bootstrap carousel

I have a bootstrap carousel here in jsfiddle and I'm trying to see if I can style the controls/arrows on the left and right side so they don't show a darker area both with and without hovering over the arrows/side area. I just want the arrows to highlight when they get hovered over.
Here is my basic carousel code
.item img {width: 100%; height: auto}
<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://placehold.it/450x350" alt="Slide 1">
<div class="carousel-caption">
Caption Slide 1
</div>
</div>
<div class="item">
<img src="http://placehold.it/450x350" alt="Slide 2">
<div class="carousel-caption">
Caption Slide 2
</div>
</div>
<div class="item">
<img src="http://placehold.it/450x350" alt="Slide 3">
<div class="carousel-caption">
Caption Slide 3
</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>

Bootstrap Carousel doesn't show all the thumbnails

My bootstrap carousel is unable to show all the thumbnail images.
I have 4 images, but it only shows 3 of the images, the last one being an empty image on my website.
Here is my code:
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Images/womenad1.jpg">
</div>
<div class="item">
<img src="Images/womenad2.jpg">
</div>
<div class="item">
<img src="Images/womenad3.jpg">
</div>
<div class="item">
<img src="Images/womenad4.jpg">
</div>
</div>
<!-- Left and right controls -->
<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>
Please advise.

I'm not sure what went wrong, but I changed the size of all my thumbnails to be almost the same width and height. This solved the problem.

Is womenad4.jpg surely in the Images directory?
And also check whether it is a png or other file type.
This might work otherwise..
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Images/womenad1.jpg" alt="Chania">
</div>
<div class="item">
<img src="Images/womenad2.jpg" alt="Chania">
</div>
<div class="item">
<img src="Images/womenad3.jpg" alt="Flower">
</div>
<div class="item">
<img src="Images/womenad4.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<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>

Bootstrap carousel doesn't load

I'm using bootstrap 3 and i have a problem with my carousel.
It doesn't slide auto. But if i click on right or left it works and auto slide work too.
my code:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="height:344px;">
<!-- 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="assets/img/img1.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="assets/img/img2.jpg" alt="...">
<div class="carousel-caption">
</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>
Thank you for your help :)

Acutually this works auto, you just have to wait until the first slide will move out. If you want to manage the interval you can use jQuery as in the provided example (that starts from your code):
var $ = jQuery.noConflict();
$(document).ready(function() {
$('#carousel-example-generic').carousel({ interval: 5000, cycle: true });
});
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="height:344px;">
<!-- 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="assets/img/img1.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="assets/img/img2.jpg" alt="...">
<div class="carousel-caption">
</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 need to intialize the carousel with JavaScript.
Add this to your code:
<script type="text/javascript">
$(document).ready(function(){
$('carousel-example-generic').carousel({
interval: 2000
})
});
</script>