Question

以下是我的代码

HTML

<div class="container">
<div class="row">
  <div class="col-sm-12">
    <div id="owl-demo">
        <div class="item"><a href=""><img src="http://ppt.cc/1BbHy" alt="image-03.png"></a><p>123456789012345678901234567890123456789012345678901234567890</p></div>
        <div class="item"><a href=""><img src="http://ppt.cc/1BbHy" alt="image-03.png"></a><p>123456789012345678901234567890123456789012345678901234567890</p></div>
        <div class="item"><a href=""><img src="http://ppt.cc/1BbHy" alt="image-03.png"></a><p>123456789012345678901234567890</p></div>
        <div class="item"><a href=""><img src="http://ppt.cc/1BbHy" alt="image-03.png"></a><p>123456789012345678901234567890</p></div>
        <div class="item"><a href=""><img src="http://ppt.cc/1BbHy" alt="image-03.png"></a><p>123456789012345678901234567890</p></div>

    </div>
  </div>
</div>

CSS

#owl-demo .item{
margin: 0px 5px 0px;
}
#owl-demo .item img{
  display: block;
  width: 50%;
  height: auto;
}

的Javascript

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    autoPlay: false, //Set AutoPlay to 3 seconds
    items : 5,
    itemsDesktop : [1024,5],
    itemsDesktopSmall : [979,3],
    navigation : true,
    pagination : false,
    navigationText : ["<", ">"]
  });
});

我正在使用owl-carousel作为滑块，并希望在每个图像下添加一些文字或段落.Owl-carousel支持响应滑块，那么如何在每个图像下放置段落并支持响应式设计？这是我在JSFIDDLE

上的代码

使用owl-carousel时如何在每个图像下放置段落？

0 个答案: