Переключение на карусель

Это следующий вопрос относительно ответа @StrangeElement на этот более старый вопрос: Может ли плагин Twitter-бутстрапа Twitter загружаться и исчезать при переходе слайдов

Я попробовал mod @StrangeElement для bootstrap.css, и у меня почти все работает. проблема в том, что когда активное изображение исчезает, оно исчезает до белого, затем следующее изображение будет появляться без анимации. что я могу здесь пропустить?

вот пример, с которым я работаю:

http://planetofsoundonline.com/beta/index.php

любые указатели были бы чрезвычайно оценены. спасибо!

Ответы

Ответ 1

Возьмите посмотреть на эту скрипту. К сожалению, он не работает ни в одной из доступных в настоящее время версий Internet Explorer.

Вашему карусели div нужен дополнительный класс carousel-fade, чтобы он работал.

[источник]

Этот переход показывает следующее изображение, а затем исчезает новое изображение поверх него. Если вы хотите, чтобы прямое угасание исчезло в анимации, добавьте эти строки в css.

.carousel.carousel-fade .item {
  opacity:0;
}

.carousel.carousel-fade .active.item {
    opacity:1;
}

Ответ 2

Как насчет добавления:

 filter: alpha(opacity=100); /* ie fix */

Результат:

.carousel.carousel-fade .item {
  opacity:0;
  filter: alpha(opacity=0); /* ie fix */
}

.carousel.carousel-fade .active.item {
    opacity:1;
    filter: alpha(opacity=100); /* ie fix */
}

Ответ 3

Я успешно сменил карусель на затухающие изображения вместо того, чтобы их скопировать. И я также масштабировал изображения через CSS, чтобы они были отзывчивы:

img.carousel-img {
  max-width:1900px;
  width:100%;
}

К сожалению, в Webkit-браузерах, в то время как анимация замирания была активной, каждое изображение было масштабировано до его первоначального размера. И сразу после завершения каждой анимации изображение будет масштабировано правильно в соответствии с вышеприведенным правилом CSS (сразу, а не анимировано). Конечно, анимация выглядела дилетантской и заикалась таким образом. Поэтому я добавил

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

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

.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transform: translate3d(0,0,0);  /* WEBKIT-FIX FOR FADING SCALED IMAGES CORRECTLY VIA CSS-TRANSITIONS */
}

Здесь я нашел это решение: Почему применяется '-webkit-backface-visibility: hidden;' исправлять проблемы с отрицательным маржинальным переходом на ios/ipad 5.1?

Ответ 4

Надеюсь, это поможет следующему человеку. Я хотел Scale и Fade.

На самом деле не нужно добавлять дополнительный класс. Bootstrap 3.3.6

Fade and Scale (Учитывает стрелки влево/вправо)

/* Carousel Scale and Fade */

/* Carousel Fade */
.carousel .item {
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
.carousel .active.left, .carousel .active.right {
    left: 0;
    opacity: 0;
    z-index: 2;
}
.carousel .next, .carousel .prev {
    left: 0;
    opacity: 1;
    z-index: 1;
}

/* Carousel Scale */
.carousel .item.active {
    animation: zoom 30s;
    -moz-animation: zoom 30s;
    -webkit-animation: zoom 30s;
    -o-animation: zoom 30s;
}
@keyframes zoom {
    from {transform:scale(1);}
    to {transform:scale(2);}
}
@-moz-keyframes zoom {
    from {-moz-transform:scale(1);}
    to {-moz-transform:scale(2);}
}
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(1);}
    to {-webkit-transform:scale(2);}
}
@-o-keyframes zoom {
    from {-o-transform:scale(1);}
    to {-o-transform:scale(2);}
}