Twitter Bootstrap Карусель слайд не работает

Я пытаюсь реализовать Twitter Bootstrap Carousel plug in. Он выглядит и автоматически циклически правильно, но эффект скольжения между элементами не работает. Он просто статически заменяет один элемент на другой. Хотя это функционально, это менее чем приятный 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>
6
carousel css html javascript twitter-bootstrap

5 ответов

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

удалите все следующие сценарии 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-файл из-за порядка загрузки ваших скриптов.

13

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

bootstrap-переход.js

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

12

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

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

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

при использовании class="carousel slide" и 

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

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

2

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

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

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

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

Проверьте ссылку Bootstrap CSS & JS в коде.. а также проверьте порядок файлов ссылок

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

  1. ушко.в CSS
  2. bootstrap-тема.в CSS
  3. jquery-1.9.1.js
  4. ушко.js

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

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

1

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

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

Я добавил, что вот так:

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

оказывается, это все портит. Удаление позиции: относительная; Исправлена ошибка. Теперь скольжение плавное и правильное.

0