Bootstrap разбиение на карусели с предыдущим и следующим

Question

Я пытаюсь добавить элементы управления Карусель влево и вправо в список индикаторов карусели, чтобы они выглядели как нумерация страниц, там все работает нормально, но проблема, с которой я сталкиваюсь, - это ИНДЕКС списка индикаторов карусели. Кто-нибудь может помочь решить эту проблему? Заранее спасибо:)

Вот демоверсия:

https://jsfiddle.net/adampavlov/u6pbca1k/11/

.carousel-indicators li {
    width: 32px !important;
    height: 42px !important;
    border-radius: 0;
    line-height: 42px;
    font-weight: 500;
    text-align: center;
    text-indent: inherit;
    border: 1px solid transparent;
    opacity: 1;
    font-size: 18px;
    color: #777777;
}
.carousel-indicators li.active {
    color: #F85A05;
}
.carousel-indicators .prev, 
.carousel-indicators .next {
    opacity: 1;
    width: 50px;
    height: 41px;
    border: 1px solid #D8D8D8;
    font-size: 30px;
    margin: 0 20px;
    text-align: center;
}

Answer 1

Это потому, что ваши стрелки обрабатываются как индикаторы, так как они находятся внутри div с классом carousel-indicators. Вместо этого они должны жить вне этого div и иметь свои собственные классы, такие как carousel-control-prev и carousel-control-next.

. Левая стрелка обрабатывается как индекс 0 для счетчика нумерации страниц вместо числа 1 , Итак, bootstrap видит 4 элемента, которые он видит как узлы нумерации страниц [left arrow, 1, 2, 3, right arrow], вместо того, чтобы просто иметь [1, 2, 3].

Итак, что-то вроде этого будет работать:

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

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

В документах Bootstrap есть более подробный ответ на этот вопрос. Вот ссылка на документы .