Question

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

我将所有标题的不透明度设置为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">

在

之前加入JScript

    <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来获得你想要的确切颜色/动画。

戴比

将动画字幕添加到猫头鹰轮播中

2 个答案: