Может ли плагин Twitter Bootstrap Carousel постепенно исчезать при переходе между слайдами

Question

У меня есть очень базовая реализация плагина Twitter Bootstrap Carousel на сайте, над которым я работаю (http://furnitureroadshow.com/). Мне было просто интересно, расширил ли кто-нибудь плагин Carousel так, чтобы он появлялся и исчезал на скользящий переход?

Я нашел эту проблему # 2050 на github.com (https://github.com/twitter/bootstrap/issues/2050), которая, кажется, предполагает, что на данный момент это невозможно. Просто хотел посмотреть, возможно ли это или было сделано.

Answer 1

Да. Bootstrap использует CSS-переходы, поэтому это можно легко сделать без JavaScript.

CSS:

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

Однако я заметил, что событие окончания перехода срабатывает преждевременно с интервалом по умолчанию 5 с и переходом затухания 3 с. Увеличение интервала карусели до 8 с обеспечивает хороший эффект.

Очень гладко.

Answer 2

Да.Хотя я использую следующий код:

.carousel.fade
{
    opacity: 1;

    .item
    {
        -moz-transition: opacity ease-in-out .7s;
        -o-transition: opacity ease-in-out .7s;
        -webkit-transition: opacity ease-in-out .7s;
        transition: opacity ease-in-out .7s;
        left: 0 !important;
        opacity: 0;
        top:0;
        position:absolute;
        width: 100%;
        display:block !important;
        z-index:1;
        &:first-child{
            top:auto;
            position:relative;
        }

        &.active
        {
            opacity: 1;
            -moz-transition: opacity ease-in-out .7s;
            -o-transition: opacity ease-in-out .7s;
            -webkit-transition: opacity ease-in-out .7s;
            transition: opacity ease-in-out .7s;
            z-index:2;
        }
    }
}

Затем измените класс на карусели с «скольжения карусели» на «исчезновение карусели».Это работает в Safari, Chrome, Firefox и IE 10. Он корректно понизит версию в IE 9, однако, приятного эффекта лица не произойдет.добавил следующее, которое переписано как чистый CSS вместо вышеупомянутого, которое было МЕНЬШЕ:

.carousel.fade {
  opacity: 1;
}
.carousel.fade .item {
  -moz-transition: opacity ease-in-out .7s;
  -o-transition: opacity ease-in-out .7s;
  -webkit-transition: opacity ease-in-out .7s;
  transition: opacity ease-in-out .7s;
  left: 0 !important;
  opacity: 0;
  top:0;
  position:absolute;
  width: 100%;
  display:block !important;
  z-index:1;
}
.carousel.fade .item:first-child {
  top:auto;
  position:relative;
}
.carousel.fade .item.active {
  opacity: 1;
  -moz-transition: opacity ease-in-out .7s;
  -o-transition: opacity ease-in-out .7s;
  -webkit-transition: opacity ease-in-out .7s;
  transition: opacity ease-in-out .7s;
  z-index:2;
}

Answer 3

Да. Bootstrap использует CSS-переходы, поэтому это может быть легко сделано без какого-либо Javascript. Просто используйте CSS3. Пожалуйста, посмотрите на

carousel.carousel-fade

в CSS следующих примеров:

• http://jsfiddle.net/seemly/ww67B/123/
• http://bootply.com/86170
• http://codepen.io/Rowno/pen/Afykb

Answer 4

Это лучшее решение, которое я нашел:

http://untame.net/2013/04/twitter-bootstrap-carousel/

Answer 5

Эта проблема возникла при использовании Bootstrap 3. Моим решением было добавить класс carousel-fade в основной DIV карусели и вставить следующий CSS, где-то после Включен CSS Bootstrap:

.carousel-fade .item {
  opacity: 0;
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -ms-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
  left: 0 !important;
}

.carousel-fade .active {
  opacity: 1 !important;
}

.carousel-fade .left {
  opacity: 0 !important;
  -webkit-transition: opacity 0.5s ease-in-out !important;
  -moz-transition: opacity 0.5s ease-in-out !important;
  -ms-transition: opacity 0.5s ease-in-out !important;
  -o-transition: opacity 0.5s ease-in-out !important;
  transition: opacity 0.5s ease-in-out !important;
}

.carousel-fade .carousel-control {
  opacity: 1 !important;
}

Стили переходов, которые применяет Bootstrap, означают, что вам нужно быстро переходить с середины шага (активный слева, следующий слева), в противном случае элемент просто исчезает (отсюда время перехода 1/2 секунды).

Я не экспериментировал с настройкой времени перехода .item и .left, но им, вероятно, потребуется корректировка пропорционально, чтобы эффект выглядел хорошо.

Answer 6

Если вы используете Bootstrap 3.3.x, используйте этот код (вам нужно добавить имя класса carousel-fade в вашу карусель).

Answer 7

Примечание. Если вы используете Bootstrap + AngularJS + UI Bootstrap, классы .left .right и .next никогда не добавляются.Использование примера по следующей ссылке и ответ CSS от Роберта Макки работает.Я хотел прокомментировать, потому что потребовалось 3 дня, чтобы найти полное решение.Надеюсь, что это поможет другим!

https://angular -ui.github.io / bootstrap / # / carousel

Фрагмент кода из демонстрационной версии Bootstrap пользовательского интерфейса по вышеуказанной ссылке.

angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 5000;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: 'http://placekitten.com/' + newWidth + '/300',
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
        ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
  for (var i=0; i<4; i++) {
    $scope.addSlide();
  }
});

Html From UI Bootstrap, Уведомление Я добавил класс .fade в пример.

<div ng-controller="CarouselDemoCtrl">
    <div style="height: 305px">
        <carousel class="fade" interval="myInterval">
          <slide ng-repeat="slide in slides" active="slide.active">
            <img ng-src="{{slide.image}}" style="margin:auto;">
            <div class="carousel-caption">
              <h4>Slide {{$index}}</h4>
              <p>{{slide.text}}</p>
            </div>
          </slide>
        </carousel>
    </div>
</div>

CSS из ответа Роберта Макки выше

.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
left: 0 !important;
opacity: 0;
top:0;
position:absolute;
width: 100%;
display:block !important;
z-index:1;
}
.carousel.fade .item:first-child {
top:auto;
position:relative;
}
.carousel.fade .item.active {
opacity: 1;
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
z-index:2;
}
/*
Added z-index to raise the left right controls to the top
*/
.carousel-control {
z-index:3;
}