Вопрос по jquery, twitter-bootstrap-3, css – Bootstrap carousel-fade больше не работает с maxcdn 3.3.bootstrap.min.css

6

У меня был переход fade, который некоторое время работал в сборке Bootstrap 3, но я просто изменил вызов с локальной копии bootstrap.min.css (Bootstrap v3.1.1) на<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> и переход исчезает больше не работает. Он просто переходит прямо к следующему слайду. Нет перехода вообще.

Я попытался добавить идентификатор карусели, но это не сработало.

<div id="myCarousel" class="carousel carousel-fade slide " data-ride="carousel">
        <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>

и т.п.

CSS это:

.carousel-fade .item {
-webkit-transition: opacity 3s; 
-moz-transition: opacity 3s; 
-ms-transition: opacity 3s; 
-o-transition: opacity 3s; 
transition: opacity 3s;
}
.carousel-fade .active.left {left:0;opacity:0;z-index:2;}
.carousel-fade .next {left:0;opacity:1;z-index:1;}

[КСТАТИ: Когда я ставлю #myCarousel перед теми, это по умолчанию для перехода слайдов.]

Вы можете увидеть версию здесь, используя CSS maxcdn v3.3.0 здесь:bizharbour.net/projects/jambalaya/index.html

Тот, кто использует вызов локальной версии v3.1.1 css, находится здесь:bizharbour.net/projects/jambalaya/crewed-yacht-charter-sample-menu.htmlИсчезновение работает над этим.

Еще одна вещь, которую я изменил, это вызовjquery и загрузите файл js. Я сейчас использую:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Ранее я использовал:

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

Локальный файл bootstrap.js v3.1.1, который включает Bootstrap: transition.js v3.1.1, если это что-то значит.

Как получить карусель в Bootstrap 3.3.0 для распознавания перехода с каруселью?

Спасибо за любую помощь.

Ура, Трейси

Спасибо за ссылку. Я еще не читаю. Почему так сложно настроить в этой версии [вздох]. я пробовал.carousel-fade > .carousel-inner > .item > .transition { -webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;} в моем файле CSS. Просто возвращается к слайду по умолчанию. Я предполагаю, что .transition - это не класс. Бит// WebKit CSS3 transforms for supported devices по твоей ссылке я не понимаю. Я знаю, что мне не нужны остальные вещи, так как я не использую левый / правый элементы управления. ура Tracy Shorrock
Спасибо, Фил, но я только усугубил ситуацию. Вы можете видеть по той же ссылке, она все еще скользит, но гораздо медленнее - так что я сделал некоторый эффект! CSS из строки 205 вbizharbour.net/projects/jambalaya/css/jambalaya.css, Я чувствую, что я немного тупой! Tracy Shorrock
Эта проблема сводила меня с ума навсегда. Я в конечном счете понизил мою версию начальной загрузки. brenjt
Вам нужно взглянуть на текущие стили Bootstrap для карусели и переопределить все, что вам нужно для достижения плавного перехода. Увидетьgithub.com/twbs/bootstrap/blob/v3.3.0/less/carousel.less Phil

Ваш Ответ

1   ответ
3

Я столкнулся с той же проблемой, и я думаю, что у меня есть решение для того, что вам нужно. В 3.3 они добавили CSS-преобразования для улучшения производительности карусели в современных браузерах, поэтому вам нужно переопределить некоторые стили. Скажите, сработало ли это для вас. :)

-webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

Мое решение здесь:http://codepen.io/transportedman/pen/NPWRGq?editors=110

Решение, кажется, работает для меня. Несколько других вещей: Убедитесь, что удалилиclass="sld-transition-2" из тега body; это отображается в некоторых шаблонах Bootstrap и может повлиять на эффект перехода. Также я добавилdata-ride="carousel" data-interval="7000" в основной карусельный див для моих требований. Alex
Извините за задержку с вами. Спасибо, я реализовал ваш CSS, и он исправлен для Firefox и Chrome (на Mac), но не для Safari 6.0.2. Он также работает в браузере по умолчанию на моем Samsung Galaxy Tab BTW. Если бы кто-нибудь еще мог проверить это в Safari на Mac, это было бы полезно, возможно, это только я! Как вы думаете, @transportedman? Tracy Shorrock

Похожие вопросы