Bootstrap карусель на моих страницах не работает должным образом - PullRequest
Новая
       26

Bootstrap карусель на моих страницах не работает должным образом

2 голосов
/ 09 января 2020

Я пытаюсь построить карусель изображений, используя bootstrap 4. Однако изображения не скользят так, как должны. Курсор для изменения слайда не работает. Слайды повторяют изображения, когда вы пытаетесь go следующий слайд.

Это ссылка на проект alabamarket.com , чтобы увидеть странное поведение

Здесь это код, который я написал 

 <div class="col-md-8 hide">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="assets/sliders/award-alaba.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="assets/sliders/5.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="assets/sliders/1.jpg" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

1 Ответ

0 голосов
/ 10 января 2020

Я обнаружил странное поведение при тестировании вашего сайта.

Инструменты открытого разработчика в chrome (Ctrl + Shift + I) и поиск в панели источников: div <div _ngcontent-wfo-c3="" class="carousel-inner">, нажмите на нем правую кнопку мыши и выберите «edit html», затем скопируйте все содержимое (ctrl-A, ctrl- C).

ok .. теперь очистите содержимое (ctrl-A + suppr) и пропустите содержимое .. (я знаю, что «вы вставили то, что скопировали»), это все еще не работает

... теперь снова отредактируйте html этот div, очистить содержимое (ctrl-A + suppr), но на этот раз вставьте содержимое ниже (рабочий код) ... работает как положено,

Однако это тот же код, за исключением того, что он был скопирован в блокноте.

Может быть, в вашем исходном коде присутствует специальный символ после копирования / вставки?

РАБОЧИЙ КОД 

<div _ngcontent-wfo-c3="" class="carousel-inner">

    <div _ngcontent-wfo-c3="" class="carousel-item active">
       <img _ngcontent-wfo-c3="" alt="First slide" class="d-block w-100" src="assets/sliders/1.jpg">
    </div>

    <div _ngcontent-wfo-c3="" class="carousel-item">
       <img _ngcontent-wfo-c3="" alt="Second slide" class="d-block w-100" src="assets/sliders/2.jpg">
    </div>

    <div _ngcontent-wfo-c3="" class="carousel-item">
       <img _ngcontent-wfo-c3="" alt="Third slide" class="d-block w-100" src="assets/sliders/award-alaba.jpg">
    </div>

    <div _ngcontent-wfo-c3="" class="carousel-item">
       <img _ngcontent-wfo-c3="" alt="Third slide" class="d-block w-100" src="assets/sliders/5.jpg">
    </div>

</div>
...