이미지 위에 텍스트 배치

Question

나는 웹 사이트에 대한 slider를 만들려고 사용하고 있습니다.다음 코드를 사용하여 슬라이더를 쉽게 만들 수 있습니다.

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

.

또한 슬라이더에 이미지에 텍스트를 배치하고 싶습니다.각 이미지에 대한 고유 한 텍스트입니다.올빼미 회전 목마로 어떻게 할 수 있습니까?

Answer 1

데모

를 확인하십시오.

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

.

DIV를 사용하여 OWL-CAROUSEL을 확인하여 엄지 스크롤을 정의합니다. 쉽게 사용자 정의 할 수 있습니다.(스팸으로 인해 제거 된 링크)

당신이 도움이되기를 바랍니다 :)