twitter-bootstrap twitter-bootstrap-4 twitter-bootstrap-4-beta

Why isn't the next arrow showing?

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>

Solution

There are a couple of things to note here.

First, as you have set the id of the .carousel to ce, you should follow-up this change all over the markup. Namely, you have to set the data-target attribute of the indicators, as well as the value of href of 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 .carousel fills 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>