So, I've got a problem when trying to use a bootstrap example.
I've copied a carousel example from bootstrap's page, and tried to use it in my own project.
However, as seen on the picture -
The carousel is not centered, and the prev/next buttons are going to the far left/right, instead of being over the picture, as per bootstrap example here
The code that I'm using is:
<body role="document">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
the navbar on the top of the page</nav>
<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://i.imgur.com/SO9y5OH.jpg" alt="...">
<div class="carousel-caption">
1
</div>
</div>
<div class="item">
<img src="http://i.imgur.com/1dWsLKB.jpg" alt="...">
<div class="carousel-caption">
2
</div>
</div>
<div class="item">
<img src="http://i.imgur.com/GNZb3UZ.jpg" alt="...">
<div class="carousel-caption">
3
</div>
</div>
</div>
<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>
</body>
As I'm not that well-versed in html, could you please tell me, how to fit the thing neatly into the page?
wrap it into .container>.row>.col-sm-12
`<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- your carousel goes here -->
</div>
</div>
</div>
</div>`
Related
I have the following BS4 Carousel code, (made it using this tutorial https://www.youtube.com/watch?v=n8ItscKLf7s&list=PLRtjMdoYXLf47brThg9-nTj8HSq8cQ0ND&index=53), However the code is not working, the first image is displayed but I dont know for what reasons carousel is not controlled and it does'nt go to the next image in any case. What is the possible solution?
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<br />
<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="images/1.jpeg" alt="First-Slide">
</div>
<div class="carousel-item">
<img src="images/2.jpeg" alt="Second-Slide">
</div>
<div class="carousel-item">
<img src="images/3.jpeg" 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>
</div>
</div>
Works perfectly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<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">
<div class="item active">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/newyork.jpg" alt="New york" style="width:100%;">
</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>
</body>
</html>
Small mistake. class="carousel-item-active" should be class="carousel-item active". It is not a single class. You have combined the active class with carousel-item class. That is the mistake.
<div class="carousel-item-active">
<img src="images/1.jpeg" alt="First-Slide">
</div>
Should changed to
<div class="carousel-item active">
<img src="images/1.jpeg" alt="First-Slide">
</div>
(new to this)
I'm trying to get a static image with a carousel of different text going across the top. I've tried using the Bootstrap carousel HTML and removing sections (such as the multiple images), and using the "carousel-caption" class for my text, but that will take some styling to get it centered etc. This might be the best way, but if there is a simpler way, please let me know! (its in a jumbotron div as i was using a picture from my jumbotron section for ease)
TIA
<div class="jumbotron" id="testimonials">
<div class="container">
<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">
<div class="carousel-text">
<h3>Example headline</h3>
<p>Example description</p>
</div>
<!-- <img src="img/lesson8-portfolioheroimage2.jpg" alt="..."> -->
</div>
<div class="item">
<!-- <img src="img/portfolioheroimage.jpg" alt="..."> -->
<div class="carousel-text">
<h3>Example head</h3>
<p>Example description</p>
</div>
</div>
<div class="item">
<!-- <img src="img/portfolioheroimage3.jpg" alt="..."> -->
<div class="carousel-text">
<h3>Example headline</h3>
<p>Example descri</p>
</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>
</div><!-- container -->
</div><!-- jumbotron -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="jumbotron">
<div class="container">
<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">
<div class="item active">
<div class="carousel-text">
<h3>Example headline</h3>
<p>Example description</p>
</div>
<!-- <img src="img/lesson8-portfolioheroimage2.jpg" alt="..."> -->
</div>
<div class="item">
<!-- <img src="img/portfolioheroimage.jpg" alt="..."> -->
<div class="carousel-text">
<h3>Example head</h3>
<p>Example description</p>
</div>
</div>
<div class="item">
<!-- <img src="img/portfolioheroimage3.jpg" alt="..."> -->
<div class="carousel-text">
<h3>Example headline</h3>
<p>Example descri</p>
</div>
</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>
</div>
You need something like this I guess?
You can beautify it as per your requirement.
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 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>
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>