JavaScript
- 1 ответ
- 0 вопросов
0
Вклад в тег
$(document).ready(function (){
// Declare Carousel jquery object
var owl = $('.owl-carousel');
// Carousel initialization
owl.owlCarousel({
items:1,
margin:10,
autoHeight:true,
autoplay: true,
autoplayHoverPause:true,
dots:true,
loop:true,
pagination:false,
navigation:true
});
// add animate.css class(es) to the elements to be animated
function setAnimation ( _elem, _InOut ) {
// Store all animationend event name in a string.
// cf animate.css documentation
var animationEndEvent = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
_elem.each ( function () {
var $elem = $(this);
var $animationType = 'animated ' + $elem.data( 'animation-' + _InOut );
$elem.addClass($animationType).one(animationEndEvent, function () {
$elem.removeClass($animationType); // remove animate.css Class at the end of the animations
});
});
}
// Fired before current slide change
owl.on('change.owl.carousel', function(event) {
var $currentItem = $('.owl-item', owl).eq(event.item.index);
var $elemsToanim = $currentItem.find("[data-animation-out]");
setAnimation ($elemsToanim, 'out');
});
// Fired after current slide has been changed
owl.on('changed.owl.carousel', function(event) {
var $currentItem = $('.owl-item', owl).eq(event.item.index);
var $elemsToanim = $currentItem.find("[data-animation-in]");
setAnimation ($elemsToanim, 'in');
})
});
<div class="owl-carousel">
<div><img src="http://xn--e1afpni.xn--80adxhks/wp-content/uploads/2014/12/1-1.jpg" alt="" width="848" height="370" />
<div class="item12">
<div class="big-text" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" max-width: 500px; min-width: 450px; top: -15px;">
Двери серии Trend
</div>
<div class="excerpt" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" hidden-xs" style="top:-15px;"><span style="font-size: 18px;">Новый Тренд в Эко Шпоне</span></div>
<div class="button-holder" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style="top: -15px;"><a href="discounts/" class="btn-lg btn btn-uppercase btn-primary shop-now-button">Подробнее</a></div>
</div>
</div>
<div><img src="http://xn--e1afpni.xn--80adxhks/wp-content/uploads/2014/12/ded96eb521aaf1cea928cc95dc05d996.jpg" alt="" width="848" height="370" />
<div class="item12">
<div class="big-text" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" max-width: 500px; min-width: 450px; top: -15px;">
Двери серии Trend
</div>
<div class="excerpt hidden-xs" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" top: -15px;"><span style="font-size: 18px;">Новый Тренд в Эко Шпоне</span></div>
<div class="button-holder" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style="top: -15px;"><a href="discounts/" class="btn-lg btn btn-uppercase btn-primary shop-now-button">Подробнее</a></div>
</div>
</div>
<div><img src="http://xn--e1afpni.xn--80adxhks/wp-content/uploads/2014/12/ded96eb521aaf1cea928cc95dc05d996.jpg" alt="" width="848" height="370" />
<div class="item12">
<div class="big-text" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" max-width: 500px; min-width: 450px; top: -15px;">
Двери серии Trend
</div>
<div class="excerpt hidden-xs" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" top: -15px;"><span style="font-size: 18px;">Новый Тренд в Эко Шпоне</span></div>
<div class="button-holder" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style="top: -15px;"><a href="discounts/" class="btn-lg btn btn-uppercase btn-primary shop-now-button">Подробнее</a></div>
</div>
</div>
</div>
.item12 {
color: #fff;
position: absolute;
top: 24%;
z-index: 250;
padding-left: 8%;
}
.item12 .excerpt, .item12 .small {
font-size: 17px;
line-height: 30px;
margin-top: 10px;
margin-bottom: 20px;
font-family: 'Roboto';
font-weight: 500;
background: rgba(0, 0, 0, 0);
color: #fff;
text-transform: uppercase;
text-shadow: 1px 2px 2px rgba(0,0,0,0.9);
}
.item12 .big-text {
font-size: 35px;
line-height: 50px;
text-transform: uppercase;
text-shadow: 1px 2px 2px rgba(0,0,0,0.9);
color: #fff;
}
.animated {
-webkit-animation-duration : 3s ;
animation-duration : 3s ;
-webkit-animation-delay : 500ms ;
animation-delay : 500ms ;
}
.animate-out {
-webkit-animation-delay : 0ms ;
animation-delay : 0ms ;
}