Bootstrap карусель управления не отражает стили - PullRequest
Новая
       13

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

2 голосов
/ 01 ноября 2019

Я хочу, чтобы мои элементы управления каруселью были примерно такими (ссылка в конце). и они должны быть вне карусели. но когда я пытался добавить стили, кажется, ничего не отражало, есть ли что-то, чего мне не хватает. Пожалуйста, помогите мне.

Заранее спасибо.

Ожидаемое управление каруселью - осталось 

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
    position: absolute;
    top: 83% !important;
    z-index: 5;
    display: inline-block;
    margin-top: -10px;
}
h4 {
    margin: 20px 10px 10px;
}
p {
    margin: 10px;
}

#carousel-example-generic {
    margin: 20px auto;
    width: 400px;
}

#carousel-custom {
    margin: 20px auto;
    width: 400px;
}
#carousel-custom .carousel-indicators {
    margin: 10px 0 0;
    overflow: auto;
    position: static;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}
#carousel-custom .carousel-indicators li {
    background-color: transparent;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
    height: auto;
    margin: 0 !important;
    width: auto;
}
#carousel-custom .carousel-indicators li img {
    display: block;
    opacity: 0.5;
}
#carousel-custom .carousel-indicators li.active img {
    opacity: 1;
}
#carousel-custom .carousel-indicators li:hover img {
    opacity: 0.75;
}
#carousel-custom .carousel-outer {
    position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<div id='carousel-custom' class='carousel slide' data-ride='carousel'>
                <div class='carousel-outer'>
                    <!-- Wrapper for slides -->
                    <div class='carousel-inner'>
                        <div class='item active'>
                            <img src='http://placehold.it/400x200&text=slide1' alt='' />
                        </div>
                        <div class='item'>
                            <img src='http://placehold.it/400x200&text=slide2' alt='' />
                        </div>
                        <div class='item'>
                            <img src='http://placehold.it/400x200&text=slide3' alt='' />
                        </div>
                            
                        <div class='item'>
                            <img src='http://placehold.it/400x200&text=slide4' alt='' />
                        </div>
                        <div class='item'>
                            <img src='http://placehold.it/400x200&text=slide5' alt='' />
                        </div>
                        <div class='item'>
                            <img src='http://placehold.it/400x200&text=slide6' alt='' />
                        </div>
                    </div>              
                </div>
                <!-- Controls -->
                    <a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
                        <span class='glyphicon glyphicon-chevron-left'></span>
                    </a>
                    <a class='right carousel-control' href='#carousel-custom' data-slide='next'>
                        <span class='glyphicon glyphicon-chevron-right'></span>
                    </a>
                <!-- Indicators -->
                <ol class='carousel-indicators'>
                    <li data-target='#carousel-custom' data-slide-to='0' class='active'><img src='http://placehold.it/100x50&text=slide1' alt='' /></li>
                    <li data-target='#carousel-custom' data-slide-to='1'><img src='http://placehold.it/100x50&text=slide2' alt='' /></li>
                    <li data-target='#carousel-custom' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' /></li>
                    <li data-target='#carousel-custom' data-slide-to='3'><img src='http://placehold.it/100x50&text=slide4' alt='' /></li>
                    <li data-target='#carousel-custom' data-slide-to='4'><img src='http://placehold.it/100x50&text=slide5' alt='' /></li>
                    <li data-target='#carousel-custom' data-slide-to='5'><img src='http://placehold.it/100x50&text=slide6' alt='' /></li>
                </ol>
            </div>

Я хочу, чтобы элементы управления моей карусели были примерно такими (ссылка в конце). и они должны быть вне карусели. но когда я пытался добавить стили, кажется, ничего не отражало, есть ли что-то, чего мне не хватает. Пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 01 ноября 2019

Рабочая демонстрация ниже: добавлен рисунок, который вы даете, просто настройте его и добавьте URL-адрес изображения. 

.carousel-control img{
  z-index: 5;
  display: inline-block;
  margin-top: 100%;
  position:relative;
}

h4 {
  margin: 20px 10px 10px;
}

p {
  margin: 10px;
}

#carousel-example-generic {
  margin: 20px auto;
  width: 400px;
}

#carousel-custom {
  margin: 20px auto;
  width: 400px;
}

#carousel-custom .carousel-indicators {
  margin: 10px 0 0;
  overflow: auto;
  position: static;
  text-align: left;
  white-space: nowrap;
  width: 100%;
}

#carousel-custom .carousel-indicators li {
  background-color: transparent;
  -webkit-border-radius: 0;
  border-radius: 0;
  display: inline-block;
  height: auto;
  margin: 0 !important;
  width: auto;
}

#carousel-custom .carousel-indicators li img {
  display: block;
  opacity: 0.5;
}

#carousel-custom .carousel-indicators li.active img {
  opacity: 1;
}

#carousel-custom .carousel-indicators li:hover img {
  opacity: 0.75;
}

#carousel-custom .carousel-outer {
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="
  crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
    <img src="https://i.stack.imgur.com/4HGNH.jpg" />
  </a>
  <a class='right carousel-control' href='#carousel-custom' data-slide='next'>
    <img src="https://i.stack.imgur.com/4HGNH.jpg" />
  </a>
<div id='carousel-custom' class='carousel slide' data-ride='carousel'>
  <div class='carousel-outer'>
    <!-- Wrapper for slides -->
    <div class='carousel-inner'>
      <div class='item active'>
        <img src='http://placehold.it/400x200&text=slide1' alt='' />
      </div>
      <div class='item'>
        <img src='http://placehold.it/400x200&text=slide2' alt='' />
      </div>
      <div class='item'>
        <img src='http://placehold.it/400x200&text=slide3' alt='' />
      </div>

      <div class='item'>
        <img src='http://placehold.it/400x200&text=slide4' alt='' />
      </div>
      <div class='item'>
        <img src='http://placehold.it/400x200&text=slide5' alt='' />
      </div>
      <div class='item'>
        <img src='http://placehold.it/400x200&text=slide6' alt='' />
      </div>
    </div>
  </div>
  <!-- Controls -->
  
  <!-- Indicators -->
  <ol class='carousel-indicators'>
    <li data-target='#carousel-custom' data-slide-to='0' class='active'><img src='http://placehold.it/100x50&text=slide1' alt='' /></li>
    <li data-target='#carousel-custom' data-slide-to='1'><img src='http://placehold.it/100x50&text=slide2' alt='' /></li>
    <li data-target='#carousel-custom' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' /></li>
    <li data-target='#carousel-custom' data-slide-to='3'><img src='http://placehold.it/100x50&text=slide4' alt='' /></li>
    <li data-target='#carousel-custom' data-slide-to='4'><img src='http://placehold.it/100x50&text=slide5' alt='' /></li>
    <li data-target='#carousel-custom' data-slide-to='5'><img src='http://placehold.it/100x50&text=slide6' alt='' /></li>
  </ol>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...