画像の上にテキストを配置する
-
02-01-2020 - |
質問
OWL-Carousel を使用して、Webサイト用の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>
.
私はスライダーの画像にテキストを置きたいです。各画像の固有のテキスト。OWL-Carouselでこれを行うにはどうすればいいですか?
解決
デモこちらを確認してください
<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をチェックして、親指スクロールを定義して、カスタマイズすることができます。(Linkはスパムのため削除されました)
あなたを助けることを願っています:)
所属していません StackOverflow