Элементы управления каруселью Bootstrap 3 и ссылки индикаторов не работают

Я ломаю голову, почему ссылки управления каруселью Bootstrap 3 (и индикаторы) не работают на моей странице. Это была простая копипаста из документов + небольшая настройка CSS. Код можно увидеть здесь http://bevog.si.bitcloud.nine.ch/ ( #галерея).

ОБНОВИТЬ:

Код инициализации карусели

/* GALLERY */
$('#gallery-carousel').carousel()

Карусельная разметка

<div id="gallery-carousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#bevog-image-1" data-slide-to="0" class="active"></li>
    <li data-target="#bevog-image-2" data-slide-to="1"></li>
    <li data-target="#bevog-image-3" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active" id="bevog-image-1">
      <img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title">
    </div>
    <div class="item" id="bevog-image-2">
      <img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title">
    </div>
    <div class="item" id="bevog-image-3">
      <img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title">
    </div>
  </div>

  <a class="left carousel-control" data-slide="prev" href="#"><span class="icon-prev"></span></a>
  <a class="right carousel-control" data-slide="next" href="#"><span class="icon-next"></span></a>
</div>

carousel jquery twitter-bootstrap-3
person Primoz Rome    schedule 01.10.2013    source источник
comment
опубликуйте свой код, где ваша инициализация карусели и html   -  person Eugen Halca    schedule 01.10.2013
comment
вопрос обновлен с кодом   -  person Primoz Rome    schedule 01.10.2013
comment
Единственное, что нужно исправить в приведенном выше коде, это data-target. Все цели данных должны быть галереей-каруселью.   -  person MsBugKiller    schedule 14.12.2015

Ответы (5)


arrow_upward
19
arrow_downward

Якорные теги ссылок карусели должны иметь href, указывающий на идентификатор карусели. См. документацию по Bootstrap.

<a class="left carousel-control" data-slide="prev" href="#gallery-carousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#gallery-carousel"><span class="icon-next"></span></a>
person DigTheDoug    schedule 01.10.2013

arrow_upward
8
arrow_downward

У меня была аналогичная проблема с индикаторами (не работает). Для индикаторов вы можете добавить это в свой JS... Это вручную установит ту же функцию для индикаторов:

$('.carousel-indicators li').click(function(e){
        e.stopPropagation();
        var goTo = $(this).data('slide-to');
        $('.carousel-inner .item').each(function(index){
            if($(this).data('id') == goTo){
                goTo = index;
                return false;
            }
        });

        $('#gallery-carousel').carousel(goTo); 
    });
person Chirag Mishra    schedule 17.06.2015
comment
Вы должны уточнить свой ответ и объяснить их. - person avcajaraville; 17.06.2015

arrow_upward
2
arrow_downward

Опасности копипаста.

Потратив несколько часов на то, чтобы заставить элементы управления работать, я обнаружил, что в моем коде есть еще одна карусель на панели навигации с тем же идентификатором #myCarousel.

На всякий случай, если кто-то столкнется с той же проблемой.

person bhaskarc    schedule 25.05.2016

arrow_upward
2
arrow_downward

Замените каждый атрибут href на data-target в правом и левом элементах управления карусели.

person Dejazmach    schedule 05.12.2016
comment
Спасибо! Это сработало отлично, и больше никаких раздражающих изменений URL-адреса. - person JSEvgeny; 05.08.2020

arrow_upward
0
arrow_downward

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

person Dawn    schedule 21.11.2013