jquery - 如何在猫头鹰 slider 中使用一些元素并为其设置动画？

Question

我在我的网站皮肤中使用猫头鹰 slider 。我的代码如下:

<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 标签添加到 slider 中并为其设置动画。 h2 标签的位置必须是左按钮。

如何做到这一点？

Answer 1

1. 将 h2 标签添加到 .item
2. 将 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