У меня есть очень простая реализация плагина Twitter Bootstrap Carousel на сайте, над которым я работаю (http://furnitureroadshow.com/). Я просто задавался вопросом, расширил ли плагин Карусель, чтобы он исчезал и исчезал при переходе слайдов?
Я нашел эту проблему # 2050 на github.com(https://github.com/twitter/bootstrap/issues/2050), которая, кажется, предполагает, что на данный момент это не" возможно. Просто хотел посмотреть, может ли это быть или было сделано.
Да. 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 с.
Очень плавный.
Да. Хотя я использую следующий код.
.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;
}
}
}
Затем измените класс на карусели от "карусельного слайда" до "карусельного замирания". Это работает в сафари, хром, firefox и IE 10. Он будет правильно понижать рейтинг в IE 9, однако приятного эффекта лица не произойдет.
Изменить. Поскольку этот ответ получил такую популярность, я добавил следующее, которое было переписано как чистый CSS, а не выше, чем LESS:
.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;
}
Да. Bootstrap использует переходы CSS, поэтому их можно легко сделать без Javascript. Просто используйте CSS3. Пожалуйста, взгляните на
carousel.carousel-fade
в CSS следующих примеров:
Это лучшее решение, которое я нашел:
При использовании Bootstrap 3 возникла эта проблема.
Мое решение состояло в том, чтобы добавить класс carousel-fade в основную DIV карусели и сложить следующий CSS, где-то после включения Bootstrap CSS:
.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, но им, вероятно, придется корректировать пропорционально, чтобы эффект выглядел приятным.
Если вы используете Bootstrap 3.3.x, то используйте этот код (вам нужно добавить имя класса карусель-выцветание на вашу карусель).
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
Примечание. Если вы используете Bootstrap + AngularJS + UI Bootstrap, классы .left.right и .next не добавляются. Используя пример по следующей ссылке, и CSS из ответа Роберта Макки работает. Я хотел прокомментировать, потому что потребовалось 3 дня, чтобы найти полное решение. Надеюсь, это поможет другим!
https://angular-ui.github.io/bootstrap/#/carousel
Снимок кода из UI Bootstrap Demo по вышеуказанной ссылке.
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 Из UT 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;
}
Для Bootstrap 3.3.6. - любой ответ, который выложил выше, не помог мне в каждом браузере (особенно много проблем в Firefox). Надеюсь, что это поможет кому-то.
Просто добавьте класс карусели, как это:
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
и добавьте этот код в свой css:
.carousel-fade .carousel-inner .item {
-webkit-transition: all 1.1s ease-in-out, opacity 1s ease-in;
-moz-transition: all 1.1s ease-in-out, opacity 1s ease-in;
-ms-transition: all 1.1s ease-in-out, opacity 1s ease-in;
-o-transition: all 1.1s ease-in-out, opacity 1s ease-in;
transition: all 1.1s ease-in-out, opacity 1s ease-in;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0 !important;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1 !important;
}
.carousel-fade .carousel-control {
z-index: 2 !important;
}