Заголовок цикла плагинов jQuery не анимируется во время слайд-шоу

Question

Заголовок цикла плагинов jQuery не анимируется во время слайд-шоу

0

Я не могу заставить анимацию надписи/надписи работать. Я хочу, чтобы заголовок скользил вверх и вниз со дна, когда слайды входят и выходят. Я попробовал кучу вещей, и я не мог заставить его работать. Мои слайды состоят из разделов, а не изображений. Не уверен, что я помещаю HTML для заголовков в нужном месте. Я включил плагин caption2.

Jsfiddle

<div class="cycle-slideshow slider"
    data-cycle-slides = "> div"
    data-cycle-fx="scrollHorz"
    data-cycle-timeout="3000"
    data-cycle-caption-plugin="caption2"
    data-cycle-caption-fx-out="slideUp"
    data-cycle-caption-fx-in="slideDown"
        >

<div class="slide1 slide">
    <div class= "innerWrapper" data-cycle-title="Spring">       
        <p class ="slide1text">This is a great div Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, unde, vel ratione nulla illum libero fuga placeat corporis molestias quisquam.</p> <img class ="slide1img" src="http://dummyimage.com/300x150/000/fff&text=slide1" alt=""/>
        <br>
            <a href="" class="button">Click More</a>
     </div>
<div class="cycle-overlay">The Redwoods 1</div>
</div>

<div class="slide2 slide">
    <div class = "innerWrapper"  data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens">    
        <img class ="slide2img" src="http://dummyimage.com/250x150/000/fff&text=slide2" alt=""/>    
        <p class ="slide2text">Text for slide 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, molestias incidunt ab voluptatibus id nemo error delectus sunt impedit illum.</p>
    </div>
    <div class="cycle-caption">Test</div>
<div class="cycle-overlay"></div>
</div>

</div>

Jsfiddle

Благодарим вас за помощь.

jack blank 05 янв. 2014, в 10:35

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

2pha · Accepted Answer · 2014-01-05T07-58-00.000Z

Удалите "тестовый" текст из заголовка цикла и поместите его в оверлей цикла, чтобы он был совместим с другими слайдами. то этот javascript должен начать работу:

$( '.cycle-slideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    $(incomingSlideEl).find('.cycle-overlay').slideDown();
    $(outgoingSlideEl).find('.cycle-overlay').slideUp();
});

вам, возможно, придется немного поиграть с ним. http://jsfiddle.net/w95ya/1/

Просмотрите эту ссылку, чтобы узнать, какие события вы можете прослушать: http://jquery.malsup.com/cycle2/api/