Как сделать2
[php]
$(document).ready(function() {
$(‘#slider’).on(‘initialized.owl.carousel change.owl.carousel changed.owl.carousel’, function(e) {
if (!e.namespace || e.type != ‘initialized’ && e.property.name != ‘position’) return;
var current = e.relatedTarget.current()
var items = $(this).find(‘.owl-stage’).children()
var add = e.type == ‘changed’ || e.type == ‘initialized’
items.eq(e.relatedTarget.normalize(current )).toggleClass(‘current’, add)
}).owlCarousel({
items : 2,
nav: true,
loop: true,
});
})
[/php]
[php]
#slider {
margin: 10px 0;
width: 100%;
}
#slider .owl-item {
position: relative;
}
#slider .owl-item img {
display: block;
width: 100%;
height: auto; }
#slider .owl-item.current .caja {
opacity: 100;
transition-timing-function: ease-out;
transition-duration: 600ms; }
#slider .owl-item .caja {
z-index: 9999;
opacity: 0;
position: absolute;
width: 100px;
height: 50px;
padding: 20px;
background-color: #000; }
#slider .owl-item .caja h1 {
color: #a08e5c; }
#slider .owl-item .caja p {
color: white;
font-size: 0.8em; }
[/php]
[php]
<div id="slider">
<div><div class="caja"><p>Lorem ipsum dolor sit amet.</div><img src="https://www.jomanetworks.com/1.jpg"></div>
<div><div class="caja"><p>Lorem ipsum dolor sit amet.</div><img src="https://www.jomanetworks.com/2.jpg"></div>
<div><div class="caja"><p>Lorem ipsum dolor sit amet.</div><img src="https://www.jomanetworks.com/3.jpg"></div>
<div><div class="caja"><p>Lorem ipsum dolor sit amet.</div><img src="https://www.jomanetworks.com/4.jpg"></div>
<div><div class="caja"><p>Lorem ipsum dolor sit amet.</div><img src="https://www.jomanetworks.com/5.jpg"></div>
<div><div class="caja"><p>Lorem ipsum dolor sit amet.</div><img src="https://www.jomanetworks.com/6.jpg"></div>
</div>
[/php]
