如何将一些元素用于 owl 滑块并使其动画化？

Question

我在我的网站皮肤中使用 owl 滑块。我的代码如下：

<div id="slider" data-section="home">
  <div class="owl-carousel owl-carousel-fullwidth">
  <div class="item">
     <img src="images/iphone-1.jpg" />
     <div>
        <h2>My Industrial Group</h2>
     </div>
  </div>
  <div class="item">
     <img src="images/iphone-2.jpg" />
  </div>
  <div class="item">
     <img src="images/Sahand-Industrial-Group-Site_1400_638.jpg" />
  </div>
  <div class="item">
     <img src="images/wiredglass-1_1400_638.jpg" />
  </div>
</div>

现在我想将 h2 标签添加到滑块中并为其设置动画。 h2 标签的位置必须是左键。

如何操作？

Answer 1

将 h2 标签添加到 .item
将position:absolute添加到h2并根据需要设置bottom和left。

一起（全屏观看）

$('.owl-carousel').owlCarousel({
  loop:true,
  margin:10,
  nav:true,
  items:1
})

h2 {
  position:absolute;
  bottom:0;
  left:5px;
  color:#fff;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet" />
<div class="owl-carousel">
  <div class="item"><h2>Heading 2 - Slide 1</h2><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" /></div>
  <div class="item"><h2>Heading 2 - Slide 1</h2><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg"/ ></div>
</div>

http://jsbin.com/zotato/edit?html,css,js

如何将一些元素用于 owl 滑块并使其动画化？

How to use some elements into owl slider and animate it?

jquery

html

css

owl-carousel

animate.css