javascript - 向 Owl 轮播添加动画字幕

Question

我正在使用 Owl Carousel 并且一直在尝试添加动画字幕（只是幻灯片显示上的一个简单淡入淡出），但似乎无法弄清楚如何做到这一点。

我将所有字幕的不透明度设置为 0，然后在字幕中添加一个名为“animate-me”（使用 jQuery）的类。第一个淡入，然后所有其他都不断显示。

这是我到目前为止对 jsbin 的了解... http://jsbin.com/OGehUKEh/3/edit

Answer 1

您需要使用 Owl Carousel 回调。我找到了你需要的回调。

$("#owl-example").owlCarousel({
    beforeMove: function(){
        // BEFORE going to the next slide (hide captions)
    }, 
    afterMove: function(){
        // AFTER going to next slide (show captions)
    }
})

Answer 2

我已经使用 jCapSlide ( http://tympanus.net/codrops/2009/11/23/jcapslide-a-jquery-image-caption-plugin/ ) 成功地做到了这一点。

这是HTML：

<div class="owl-carousel">
  <div class="item" id="id_a"> <!-- The ID is for jCapSlide -->
    <img alt="text" src="imagelocation"><!-- This is my image -->
    <div class="overlay" style="display:none;"></div> <!-- this is the jCapSlide code -->
    <div class="ic_caption">
      <h3>TITLE To display</h3>
      <p class="ic_text">Caption</p>
    </div>
  </div>
  <div class="item" id="id_b">
    <img alt="text" src="another image">
    <div class="overlay" style="display:none;"></div>
    <div class="ic_caption">
      <h3>Title 2</h3>
      <p class="ic_text">More Text</p>
    </div>
  </div>
  <!-- More pictures in the same fashion as above -->
</div>

在 HEAD 中包含 CSS

<link rel="stylesheet" href="/css/owl.carousel.css">
<link rel="stylesheet" href="/css/caption/style.css">

在

    <script src="/js/jquery-1.11.1.js"></script>
<script src="/js/jquery.capSlide.js"></script>

<script src="/js/owl.carousel.js"></script>
<script  type="text/javascript">
  $(window).load(function(){
    $(".owl-carousel").owlCarousel({responsiveClass:true, autoplay:true, autoplayTimeout: 1000, autoplayHoverPause:true, autoWidth:true, loop:true});

    $("#id_a").capslide({caption_color : '#FFFFFF', caption_bgcolor : '#002296', overlay_bgcolor : '#002296', border : '', showcaption : true});
    $("#id_b").capslide({caption_color : '#FFFFFF', caption_bgcolor : '#002296', overlay_bgcolor : '#002296', border : '', showcaption : true});
 </script>

jCapSlide 非常灵活，您可以使用 CSS 和 JS 来获得您想要的确切颜色/动画。

黛比