Bootstrap Carousel Example

<div class="container-fluid p-0">
           <div class="bg-black"> 
           <nav class="navbar navbar-light navbar-expand-md justify-content-center container">
               <a href="#" class="navbar-brand mr-0 text-white">Apple</a> 
               <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
                   <span class="navbar-toggler-icon"></span>
               </button>
               <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
                   <ul class="navbar-nav nav-fill w-100">
                       <li class="nav-item active">
                           <a class="nav-link" href="#">Mac  </a>
                       </li>
                       <li class="nav-item">
                           <a class="nav-link" href="">iPad</a>
                       </li>
                       <li class="nav-item">
                           <a class="nav-link" href="#">iPhone</a> 
                       </li>
                       <li class="nav-item">
                           <a class="nav-link" href="#">Watch</a> 
                       </li>
                       <li class="nav-item">
                           <a class="nav-link" href="#">TV</a> 
                       </li>
                       <li class="nav-item">
                           <a class="nav-link" href="#">Music</a> 
                       </li>
                       <li class="nav-item">
                           <a class="nav-link" href="#">Support</a> 
                       </li>
                   </ul>
                   <ul class="nav navbar-nav flex-row justify-content-center flex-nowrap">
                       <li class="nav-item"><a class="nav-link" href=""><i class="fa fa-facebook mr-1"></i></a> </li>
                       <li class="nav-item"><a class="nav-link" href=""><i class="fa fa-twitter"></i></a> </li>
                   </ul>
               </div>
           </nav>
           </div>
           
           
           <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
               <ol class="carousel-indicators">
                 <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                 <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                 <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
               </ol>
               <div class="carousel-inner">
                 <div class="carousel-item active">
                   <img class="d-block w-100" src="banner-1.jpg" alt="slider tolmatol">
                 </div>
                 <div class="carousel-item">
                   <img class="d-block w-100" src="banner-2.jpg" alt="tolmatol bootstrap-4">
                 </div>
         <div class="carousel-item">
                   <img class="d-block w-100" src="banner-3.jpg" alt="tolmatol bootstrap-4">
                 </div>
                
               </div>
               <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
                 <span class="sr-only">Next</span>
               </a>
             </div>

       </div>

.bg-black { background: #323232;}
    .bg-black ul li a.nav-link { color: #eee !important;}