Слайд Карусели начальной загрузки Twitter не работает - PullRequest
Новая
       13

Слайд Карусели начальной загрузки Twitter не работает

6 голосов
/ 03 апреля 2012

Я пытаюсь реализовать плагин 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>

Ответы [ 5 ]

13 голосов
/ 03 апреля 2012

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

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

12 голосов
/ 06 июня 2012

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

бутстраповские-transition.js

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

2 голосов
/ 03 мая 2012

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

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

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

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

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

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

1 голос
/ 20 мая 2014

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

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

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

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

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

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

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

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

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

0 голосов
/ 20 декабря 2014

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

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

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

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

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

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

...