Why isn't the next arrow showing?
Question
I was trying to create a carousel in Bootstrap 4 beta, everything worked but the next arrow wasn't in the right position, if you use a colored background, you can see that: it's not on the image. Arrows also don't slide images. I tried to copy w3schools controls code(which you can find here: https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp ), but it didn't work. After that I searched for a typo, but I didn't find it. May I have your help please?
This is my code:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0 shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> </head> <body> <div class="carousel slide" id="ce" data-ride="carousel"> <!-- Indicators--> <ol class="carousel-indicators"> <li data-target="#ce" data-slide-to="0" class="active"></li> <li data-target="ce" data-slide-to="1"></li> </ol> <!-- Inner --> <div class="carousel-inner"> <div class="carousel-item active"> <img style="width:500px;" src="photo.jpeg"> </div> <div class="carousel-item"> <img style="width:500px;" src="https://static.pexels.com/photos/450301/pexels-photo-450301.jpeg"> </div> </div> <!-- Carousel control --> <a class="carousel-control-prev" data-slide="prev" href="#carousel-example"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#carousel-example" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </body> </html>
2 answers
solution1
0 2018-01-13 23:48:08
Are you missing the # symbol in the second li element in the ordered list?
<li data-target="ce" data-slide-to="1"></li>
should be:
<li data-target="#ce" data-slide-to="1"></li>
solution2
0 ACCPTED 2018-01-17 21:55:18
There are a couple of things to note here.
- First, as you have set the
idof the.carouseltoce, you should follow-up this change all over the markup. Namely, you have to set thedata-targetattribute of the indicators, as well as the value ofhrefof the carousel controls. The latter ones are the arrows! - Second, you did not see the arrows (or at least the right one) over the images as you have set the width of the images to a fix 500px, while the
.carouselfills up all the available width. Meaning that the images were not filling up the width of the carousel, but the right arrow is sticked to the right side of the carousel.
In the example below you will see some comments as well regarding the changes I've made.
<!-- Note `id="ce"`, all `data-target` and control `href` has to match this --> <div class="carousel slide" id="ce" data-ride="carousel"> <!-- Indicators--> <ol class="carousel-indicators"> <!-- Note `data-target="#ce"` --> <li data-target="#ce" data-slide-to="0" class="active"></li> <li data-target="#ce" data-slide-to="1"></li> </ol> <!-- Inner --> <div class="carousel-inner"> <!-- The size of `.carousel-item`s should be the same, so the first image now has the same proportion as the img in the secod slide. Additionally all images set to `width: 100%`. --> <div class="carousel-item active"> <img class="w-100" src="http://via.placeholder.com/708x421/c1ae9f/ffffff?text=First+Photo"> </div> <div class="carousel-item"> <img class="w-100" src="https://static.pexels.com/photos/450301/pexels-photo-450301.jpeg"> </div> </div> <!-- Carousel control --> <!-- Note `href="#ce"` too --> <a class="carousel-control-prev" href="#ce" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#ce" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why isn't the navbar showing correctly in Bootstrap?
Why is the arrow not showing?
Why isn't background image showing up in Jumbotron (Bootstrap)?
Why isn't my CSS background image showing on my page
navbar isn't showing anything
Tooltip bootstrap isn't showing
Why isn't panel head showing in bootstrap when I use a form?
My navbar isn't showing on mobile devices
bootstrap glyphicon isn't showing on buttons
Bootstrap tooltip initialises but isn't showing up
Related Tags