Слайд карусели Twitter Bootstrap не работает

Я пытаюсь внедрить плагин Twitter Bootstrap Carousel. Он выглядит и автоматически переключается правильно, но эффект слайда между элементами не работает. Он просто статически заменяет один элемент другим. Хотя это функционально, это менее чем приятный UX. Мысли?

<div class="span7">
        <div id="myCarousel" class="carousel slide">
          <div class="carousel-inner">
            <div class="item active">
              <img src="img/CoachellaValley.png" alt="">
              <div class="carousel-caption">
                <h4>Sponsor 1</h4>
              </div>
            </div>
            <div class="item">
              <img src="img/CoachellaValley2.png" alt="">
              <div class="carousel-caption">
                <h4>Sponsor 2</h4>
              </div>
            </div>
            <div class="item">
              <img src="img/CoachellaValley3.png" alt="">
              <div class="carousel-caption">
                <h4>Sponsor 3</h4>
              </div>
            </div>
          </div>
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
      </div>
[...]
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script type="text/javascript">
  $(function(){
    $('#myCarousel').carousel();
  })
  </script>

javascript carousel html css twitter-bootstrap
person d_meyer    schedule 03.04.2012    source источник
comment
В каком браузере вы тестируете?   -  person Andres Ilich    schedule 03.04.2012
comment
Предупреждение для читателей: убедитесь, что вы также добавили слайд класса в блок карусели, иначе вы столкнетесь с теми же симптомами (изображения меняются, но не анимируются). Аналогичная проблема была опубликована и решена (см. второй комментарий) в этой теме: stackoverflow.com/questions/10660718/   -  person Marco Panichi    schedule 30.04.2016

Ответы (5)


arrow_upward
13
arrow_downward

Попробуй это:

Удалите все следующие js-скрипты, которые вы загрузили в свой документ:

<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>

И просто сохраните следующее в том же порядке (сначала идет jQuery)

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>

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

person Andres Ilich    schedule 03.04.2012

arrow_upward
12
arrow_downward

Поборовшись с этим некоторое время, я нашел решение - вам просто нужно включить

bootstrap-transition.js

и анимация слайдов будет работать.

person Martin Wright    schedule 06.06.2012
comment
Ответ Андреса Ильича выше предполагает, что код bootstrap-transition.js на самом деле уже включен в основной bootstrap.js. Если это так, ваш ответ станет неверным — нет необходимости в дополнительной загрузке файла bootstrap-transition.js. - person trejder; 25.09.2013
comment
Это был ответ, я как-то закомментировал это в bootstrap.js. :D - person Michael; 14.08.2015

arrow_upward
2
arrow_downward

Дело в том, что я использую class="carousel" для карусельного контейнера и

$('.carousel').carousel('slide',{interval:1000});

он работает только для одного левого\правого щелчка и работает очень хорошо (но только один раз).

Если использовать class="carousel slide" и

$('.carousel .slide').carousel('slide',{interval:1000});

затем переключение карусели, но без эффекта анимации слайдов.

person koles    schedule 03.05.2012
comment
$('.carousel .slide') не то же самое, что $('.carousel.slide') (без пробела). Последний будет работать, тогда как первый будет нацелен на class=slide, только если он является дочерним элементом class=carousel. - person Steve Perks; 17.01.2013

arrow_upward
1
arrow_downward

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

В Bootstrap 3 нет определения класса «слайд». Но без класса «Слайд» изображения карусели будут меняться без какого-либо эффекта анимации.

Добавьте этот скрипт в свой код

<script>
    $(document).ready(function () {
        $('.carousel').carousel();
    });
</script>

Проверьте Bootstrap CSS & JS Reference в вашем коде... а также проверьте порядок справочных файлов

Вы можете следовать этому порядку:-

  1. bootstrap.css
  2. bootstrap-theme.css
  3. jquery-1.9.1.js
  4. bootstrap.js

Блок сценария не будет работать без библиотеки JQ. Поэтому добавьте файл библиотеки JQ правильно.

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

person Shemeemsha R A    schedule 20.05.2014

arrow_upward
0
arrow_downward

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

Мой первый элемент в карусели скользил влево, как обычно, но второй элемент не был за ним. Как только первый элемент исчезал с экрана, второй элемент просто появлялся, а не скользил. Затем он исчезал, а первый элемент скользил правильно.

Если у вас возникла эта проблема, убедитесь, что у вас нет position:relative; в разделе .item.

Я добавил это так:

.carousel-inner > .item {
    position:relative;
    height:495px;
}

Оказывается, это портит дело. Удаление position:relative; исправил проблему. Теперь скольжение плавное и правильное.

person Steve    schedule 19.12.2014