Placing text over images

Question

I am using owl-carousel to make a slider for a website. I could easily make a slider using the following code :

<div id="owl-slider" class="owl-carousel"> 
                <div> <img src="images/1.jpg" /> </div>
                <div> <img src="images/2.jpg" /> </div>
                <div> <img src="images/3.jpg" /> </div>
                <div> <img src="images/4.jpg" /> </div>
</div>


<script type="text/javascript">
                $("#owl-slider").owlCarousel({
                    items : 1,
                    autoPlay : true,
                    slideSpeed : 200,
                    stopOnHover : true,
                    navigation : false
                })

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

                }); 
</script>

I also want to place some text on the images in the slider. Unique text for each image. How can I do this with owl-carousel ?

score 8 · Accepted Answer · edited Nov 08 '17 at 01:48

Please check DEMO here

<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>

CSS

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

I check owl-carousel using DIV to define the thumb scroll, it mean you can easy to customize it. (Link removed due to SPAM)

Hope that help you :)

The demo doesn't work. Any chance to have a working example? — Royi, Dec 15 '20 at 14:48

Placing text over images

1 Answers1