2015-01-28 2 views
0

У меня проблема с компонентом карусели Bootstrap, где изображение не сдвигается во время перехода.Bootstrap Carousel Image Transition Slide Не работает

В принципе, изображение, похоже, просто заменяется (и не скользит), как видно на сайте Bootstrap.

Другая проблема, с которой я сталкиваюсь, заключается в том, что изображение при переходе от одного к другому, похоже, накладывается поверх левого и правого элементов управления символами шеврона.

Я вычистить SO и нашел что-то похожее:

Twitter Bootstrap Carousel Not Sliding

Но решение при условии, кажется, не применяется для меня, как я использую Минимизированную версию Bootstrap JS, который уже имеет переход функция встроена.

Кто-нибудь сталкивался с подобной проблемой раньше?

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

<!-- Carousel [START] --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 

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

    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img src="assets/img/slider-images/header-images-01.jpg" alt="Slide 1" class="img-responsive"> 
     </div> 

     <div class="item"> 
      <img src="assets/img/slider-images/header-images-02.jpg" alt="Slide 2" class="img-responsive"> 
     </div> 

     <div class="item"> 
      <img src="assets/img/slider-images/header-images-03.jpg" alt="Slide 3" class="img-responsive"> 
     </div> 
    </div> 

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left glyphcolor" 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 glyphcolor" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div> 
<!-- Carousel [END] --> 

UPDATE: значок шеврона также покрывается когда я нажал на нее, чтобы перейти к следующему слайду.

+1

Не могли бы вы выслать какой-нибудь код? –

+0

Также, какую версию бутстрапа вы используете? –

+0

@Muroh - Version 3.2.0 – Batuta

ответ

0

Проверьте css div.item, если у вас есть позиция: абсолютная/относительная. В других случаях попробуйте создать новый документ только для вашей карусели, проверьте, работает ли это самостоятельно, и если это так, ваша проблема должна исходить из более ранней части вашего кода ... Иногда консоль не показывает вам, что не так, необходимо отслеживать самостоятельно

Смежные вопросы