我必须使用parallax.js来捕捉猫头鹰旋转木马中的背景图像。例如,我想在http://pixelcog.github.io/parallax.js/中使用https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html 我该怎么做? 笔:https://codepen.io/naaatasha/pen/gRdoej
<div class="owl-carousel slider">
<div class="item slide-wrapper parallax-window" data-parallax="scroll" data-image-src="http://trawnik.nazwa.pl/TrawnikProducent2016/wp-content/uploads/slide-strong-1.jpg">
<div class="container">
<div class="box">
<h2 class="h2 wow fadeIn text-right">co tam</h2>
<span class="subtitle wow fadeIn">ihsisdijbvjd</span>
</div>
</div>
</div>
<div class="item slide-wrapper parallax-window" data-parallax="scroll" data-image-src="http://www.focus.pl/upload/galleries/19/trawa-19061_l.jpg">
<div class="container">
<div class="box">
<h2 class="h2">lorem ipsum</h2>
<span class="subtitle">asdsk jbsjfd</span>
</div>
</div>
</div>
</div>
.slider {
position: relative;
display: table;
}
.box {
display: table-cell;
vertical-align: middle;
width: 1%;
}
.slide-wrapper {
height: 800px;
width: 100%;
background-color: #333;
backround-size: cover;
}
.h2 {
font-size: 40px;
font-weight: 500;
margin: 0;
text-transform: uppercase;
}
.subtitle {
display: block;
font-family: 'latolight', sans-serif;
font-size: 30px;
text-transform: uppercase;
}
.parallax-window {
min-height: 400px;
background: transparent !important;
}
jQuery(document).ready(function() {
jQuery(".slider").owlCarousel({
items: 1,
loop: true,
nav: false,
dots: false,
autoplay: true,
autoplayTimeout: 4000,
animateIn: 'fadeIn',
//onChange : callback
});
// function callback(event) {
// jQuery('.parallax-window').parallax();
// }
});