Placing text over images
27,359
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 :)
Author by
saplingPro
I love to write code and love to be known as a programmer. I try very hard to be creative. I am a hard working man ! I don't know where i am heading and don't know where i will be :(
Updated on November 08, 2020Comments
-
saplingPro over 3 years
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 ?
-
Laranja Mecânica about 7 yearsyour link heve virus... [CAUTION]
-
Royi over 3 yearsThe demo doesn't work. Any chance to have a working example?