содержание слайдер самозагрузки не работает должным образом

Question

Я занимаюсь разработкой сайта с помощью начальной загрузки и хочу, чтобы мой слайдер выглядеть следующим образом:

Но мое выглядит следующим образом:

.carousel-inner > .item > img, 
 
    .carousel-inner > .item > a > img { 
 
     width: 100%; 
 
     margin: auto; 
 
    } 
 
.container { 
 
    width: 100% !important; 
 
    max-width: 600px !important; 
 
    margin: auto !important; 
 
    padding: 0; 
 
    background-color: rgb(21, 138, 188); 
 
} 
 
.carousel-control.left, 
 
.carousel-control.right{ 
 
    background: transparent; 
 
} 
 
a.deposit-now { 
 
    background-color: #e50376; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
    text-transform: uppercase; 
 
    border-radius: 10px; 
 
    border: 1px solid #bf053d; 
 
    text-shadow: 5px 5px 5px #333; 
 
}

<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> 
 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    </ol> 
 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <div class="slide-1">     
 
      <h1>150% Welcome Bonus</h1>     
 
      <p>Suspendisse ut semper enim, sed laoreet ante. Vivamus dictum arcu id mi faucibus, eget iaculis diam venenatis. Vivamus efficitur quam vitae metus mattis pretium ut ut tellus.</p>     
 
      <div class="inner">      
 
       <a href="" class="deposit-now">Deposit Now</a>   
 
       <a href="" class="terms-cond">Terms and Conditions</a>     
 
      </div>    
 
     </div>  
 
     </div> 
 
     <div class="item"> 
 

 
     </div> 
 

 
     <div class="item"> 
 

 
     </div> 
 

 
     <div class="item"> 
 

 
     </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>

Как я могу сделать кнопки навигации всегда после ссылок, как показывает первый снимок? А также, есть ли способ дать высоту всем слайдам, тем временем поддерживая слайдер?

Hope you can edit from my pen

Answer 1

Если добавить к вашей CSS, то это должно помочь вам решить эту проблему. Вы можете редактировать значения в соответствии с вашими требованиями.

.carousel{ 
    padding: 0 40px; 
} 
.carousel-control{ 
    width: 5%; 
} 

Fiddle: http://codepen.io/hunzaboy/pen/dOvaJm

Answer 2

Вот мой предложение приемлемо: Сначала вам нужно обернуть карусельного контроль-s в DIV:

<div class="carousel-controls"> 
... 
</div> 

Во-вторых, вы должны задать стиль для .carousel-controls и .carousel-indicators.

Посмотрите на сниппета

.container { 
 
    width: 100% !important; 
 
    max-width: 600px !important; 
 
    padding: 0; 
 
    background-color: rgb(21, 138, 188); 
 
} 
 
.carousel-control.left, 
 
.carousel-control.right{ 
 
    background: transparent; 
 
} 
 
a.deposit-now { 
 
    background-color: #e50376; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
    text-transform: uppercase; 
 
    border-radius: 10px; 
 
    border: 1px solid #bf053d; 
 
    text-shadow: 5px 5px 5px #333; 
 
} 
 
.carousel-inner { 
 
    padding-bottom:10px; 
 
} 
 
.carousel-controls{ 
 
position:relative; 
 
    width:150px; 
 
    margin:0 auto 30px auto !important; 
 
} 
 
.carousel-indicators{ 
 
    top: 100%; 
 
}

<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.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<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> 
 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <div class="slide-1">    \t \t 
 
      <h1>150% Welcome Bonus</h1> \t \t \t \t \t 
 
      <p>Suspendisse ut semper enim, sed laoreet ante. Vivamus dictum arcu id mi faucibus, eget iaculis diam venenatis. sed laoreet ante. Vivamus dictum arcu id mi faucibus, eget iaculis diam venenatis. sed laoreet ante. Vivamus dictum arcu id mi faucibus, eget iaculis diam venenatis. Vivamus efficitur quam vitae metus mattis pretium ut ut tellus.</p> 
 
      <div class="inner"> \t \t \t \t \t \t 
 
       <a href="" class="deposit-now">Deposit Now</a> \t 
 
       <a href="" class="terms-cond">Terms and Conditions</a> \t \t \t \t \t 
 
      </div>    \t 
 
     </div> 
 
     </div> 
 

 
     <div class="item"> 
 
     
 
     </div> 
 
    
 
     <div class="item"> 
 
     
 
     </div> 
 

 
     <div class="item"> 
 
     
 
     </div> 
 
    </div> 
 

 
    <!-- Left and right controls --> 
 
    <div class="carousel-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>