Text on Slide Owl Carrossel

by cintia_rodrigues

HTML

<div id="owl-slider" class="owl-carousel"> 
    <div> <div class="textoverlay"><h1>Text 1</h1><p>Some text bla bla bla</p></div><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg" /></div>
                <div> <h2>Text 2</h2><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl6.jpg" /> </div>
                <div><h2>Text 3</h2> <img src="http://owlgraphic.com/owlcarousel/demos/assets/owl8.jpg" /> </div>
                <div> <h2>Text 4</h2><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg" /> </div>
</div>

CSS

.owl-carousel{
    
    width:900px;
    height 150px;
    position:absolute;
    background-color:#aac155;
    top:0;
    left:0;
}

.owl-carousel > div{
    
    width:20%;
    height :150px;
    display:inline-block;
    background-color:#5d730c;
}

.owl-carousel div img{
    
    width:100%;
}

.owl-carousel div h2, .owl-carousel div .textoverlay{
    position:absolute;
    color:#FFF;
    font-size:12px;
    display:block;
}

JavaScript

$("#owl-slider").owlCarousel({
                    items : 1,
                    autoPlay : true,
                    slideSpeed : 200,
                    stopOnHover : true,
                    navigation : false
                })

                $(document).ready(function() {
                    $("#owl-slider").owlCarousel();

                });