Контролите на въртележката на 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="/bg#"><span class="icon-prev"></span></a>
  <a class="right carousel-control" data-slide="next" href="/bg#"><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="/bg#gallery-carousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="/bg#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

Аз също имах същия проблем с въртележката, която не се зареждаше. Преминах от зареждането на минимизираната версия на bootstrap към пълната и след това проработи. Мисля, че нещо не е наред в минито.

person Dawn    schedule 21.11.2013