Скрытие следующего слайда при изменении размера карусели jQuery

У меня есть базовая карусель jQuery, работающая внутри адаптивного блока в теме Wordpress.

При изменении размера иногда в поле зрения появляется либо следующий слайд, либо текст на текущем слайде обрезается.

Я пытаюсь понять, как скрыть следующую панель при изменении размера и убедиться, что текст не обрезается. Был бы признателен за любые указатели.

Вы можете увидеть проблему здесь (наиболее очевидная при сжатии окна, а затем повторном расширении): http://bit.ly/1v5ZTQ8< /а>

Мой код карусели выглядит так:

   <div class="wpb_wrapper">
    <div class="testimonial">
        <div class="jcarousel-wrapper">
            <div class="jcarousel">
                <ul>
                    <li>
                        <span class="wtd-testimonial">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.    
                        </span>    
                        <span class="wtd-testimonial_author">John Smith</span>    
                    </li>    
                </ul>    
            </div>
        </div>
    </div>
</div>

И я пытаюсь управлять размером элементов следующим образом (следуя примеру на веб-странице jCarousel)

$('.jcarousel')
        .on('jcarousel:create jcarousel:reload', function() {
        var carousel = $(this),
        width = carousel.innerWidth();
            carousel.jcarousel('items').css('width', width + 'px');
    })

а это мой css для карусели

.jcarousel {
    position: relative;
    overflow: hidden;
    width:100%  
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
    list-style: none !important;
    margin-left:0px !important;
}

jquery css
person Christian Mayne    schedule 25.06.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если текущий слайд имеет класс active, вы можете сделать:

   $( '.jcarousel li.active' ).nextAll().css( 'opacity', 0 )

Если нет класса active, вы могли бы сделать то же самое, используя текущий индекс

   function handleResize(){

     $( '.jcarousel li' ).eq(current).nextAll().css( 'opacity', 0 );

   // or $( '.jcarousel li' ).eq(current).nextAll().addClass( 'is-hidden' );

     }

    $( window ).on( 'resize', handleResize );

А затем, когда событие изменения размера будет завершено, установите opacity обратно в 1 или удалите класс is-hidden

person Foreign Object    schedule 25.06.2014