Bootstrap 4 управления каруселью не отображаются

Question

У меня проблема с каруселью Bootstrap 4.Это на самом деле работает так, как должно, за исключением того, что предыдущие / следующие значки не будут отображаться.Я искал / пробовал следующее:

- глифы больше не поддерживаются

- пробовал помещать элементы управления в div "carousel-inner"

- пробовал применять z-индекс для элементов управления

- попытался изменить размеры изображения и цвета значков в CSS

Мой код выглядит так же, как документы Bootstrap и все примеры, которые я просматривал.Пожалуйста помоги!Заранее спасибо.

страница в том виде, в каком она отображается в данный момент (очевидно, даже не близка к завершению) https://cdn.rawgit.com/Cookrp924/My-Portfolio/9c48827b/Job%20Portfolio.html

рассматриваемый код:

<div class="container">
    <h1>About Me</h1>
    <div class="row">
        <div class="col-lg-7">
            <h5>I am currently living in Raleigh, NC right next to the Research Triangle Park area. Through several friends and colleagues, I developed an interest in learning how to code and have been expanding my knowledge ever since. My resources include Free Code Camp, Colt Steele's "Web Developer Bootcamp", Codecademy, Stack Overflow and of course Google.</h5>
            <h5>I am currently open to new opportunities. Please contact me at: emailhere.com</h5>
        </div>
        <div class="col-lg-5">
            <img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/19990238_1802039519806266_6452049826481461127_n.jpg?oh=5192b5fe6276a7df8be03aa31254cae6&oe=5B367A91" id="aboutmePic">
        </div>
    </div>
</div>


<div class="container">
    <h1>Skills</h1>
    <div class="row">
        <div class="col-lg-12">
            <h3>My skillset currently includes JavaScript, HTML, and CSS. I also utilize frameworks and libraries such as Bootstrap and jQuery. I always strive to create projects that are not only functional but also work reliably and have simple, easy to navigate user interfaces.</h3>
        </div>
        <div class="col-lg-1"></div>
        <div class="col-lg-4">
            <i class="devicon-javascript-plain colored"></i>
            <i class="devicon-html5-plain-wordmark colored"></i>
            <i class="devicon-css3-plain-wordmark colored"></i>
            <i class="devicon-bootstrap-plain-wordmark colored"></i>
            <i class="devicon-jquery-plain-wordmark colored"></i>
        </div>
    </div>
</div>

<div class="container">
    <h1>Projects</h1>
    <div class="carousel slide" id="projectCarousel">
        <ol class="carousel-indicators">
            <li data-target="#projectCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#projectCarousel" data-slide-to="1"></li>
            <li data-target="#projectCarousel" data-slide-to="2"></li>
            <li data-target="#projectCarousel" data-slide-to="3"></li>
            <li data-target="#projectCarousel" data-slide-to="4"></li>
        </ol>

        <div class="carousel-inner">
            <div class="carousel-item active">
                <a href="https://cdn.rawgit.com/Cookrp924/Quote-Generator/cff1b444/QuoteGenerator.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41815477-17a21464-773a-11e8-8bf7-c2748cd13075.png"></a>
            </div>
            <div class="carousel-item">
                <a href="https://cdn.rawgit.com/Cookrp924/Wikipedia-Viewer/cd5e1683/Wiki.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41825874-c749c87c-77f2-11e8-9de6-58b48b1ca5fb.jpeg"></a>
            </div>
            <div class="carousel-item">
                <a href="https://cdn.rawgit.com/Cookrp924/Local-Weather-App/37555f33/LocalWeather.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41827757-449b5a28-77ff-11e8-9e44-e37f8b6cd093.png"></a>
            </div>
            <div class="carousel-item">
                <a href="https://cdn.rawgit.com/Cookrp924/Tic-Tac-Toe/99e0b7f2/Tic-Tac-Toe.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41844177-647fe7d0-783d-11e8-88d7-4251b81a591d.png"></a>
            </div>
            <div class="carousel-item">
                <a href="https://cdn.rawgit.com/Cookrp924/Simon/4a4c0ea8/Simon.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41844777-43195570-783f-11e8-88ed-8bf0c40c7419.png"></a>
            </div>
        </div>
        <a class="carousel-control-prev" href="#projectCarousel" 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="#projectCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Answer 1

Вы на самом деле скрываете свои значки prev и next. Обновите ваш код, как показано ниже.

<a class="carousel-control-prev" href="#projectCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#projectCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon"></span>
</a>

FIDdle DEMO