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>
Related
I want to use the font awesome arrows with the code given in w3schools tut because glypicons aren't supported anymore and I can't get
<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" role="listbox">
<div class="item active">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago - A night we won't forget.</p>
</div>
</div>
<div class="item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>LA</h3>
<p>Even though the traffic was a mess, we had the best time.</p>
</div>
</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>
in the right and left control I have tried changing it to the font awesome arrows but can't get it to work.
I am developing a front-end website using bootstrap. I have inserted a slideshow but it doesn't fit the screen. I have inserted the image into the HTML, not into the CSS. Here is my code:
<div class="container-fluid" id="background">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="slideShow">
<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>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="pics/happiness1.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness2.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness3.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness4.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness5.jpg" alt="Happiness" class="slideShow">
</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>
</div>
</div>
</div>
How to make those images fit to the screen?
Append this last of your css file ..
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img{
min-height: 100vh;
}
I have been trying to set the size of the images to same value. I need all the images to appear in the same size(Same height and width). The following is the code for the Carousel. All the images appear in their original sizes. How do I go about achieving this?
<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\banner.jpg" alt="Chania">
</div>
<div class="item">
<img src="images\banner_1.jpg" alt="Chania" >
</div>
<div class="item">
<img src="images\banner_2.png" alt="Flower">
</div>
<div class="item">
<img src="images\banner_3.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>
The CSS code I am using is:
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
height: 40%;
margin: auto;
}
</style>
Here is the code of the carousel tutorial that i've got from http://bootstrapbay.com/blog/bootstrap-3-carousel-tutorial/. The carousel next button and the carousel dotted button doesn't work. I don't know what happen. Please help me about this. I put the image and the red button determines the buttons that doesn't work.
<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="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</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"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
Carousel ScreenShot
As the step 2 of the tutorial you linked in the question says, you have to add the following tags to add jquery (order matters):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
I am trying to create a carrousel with 7 images in it for a header of a website. However all the images just stack on top of one another. Here is my code, is there anything that I am doing wrong?
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/signtraysandboxpansheader1170x300.png">
</div>
</div>
<div class="item">
<img src="images/builtupletterheader1170x300.png">
</div>
<div class="item">
<img src="images/flatcutlettersheader1170x300.png">
</div>
<div class="item">
<img src="images/ledilluminatedlettersheader1170x300.png">
</div>
<div class="item">
<img src="images/header1170x450.png">
</div>
<div class="item">
<img src="images/totems&monolithheader1170x300.png">
</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>
</div>
</div>
You have misplaced the ending </div> tag for .carousel-inner. The carousel inner should contain all your .item elements. Right now it only includes the first one.
http://www.bootply.com/q739Qe9Lvj