Hiding next slide when resizing a jQuery Carousel

Question

I have a basic jQuery carousel running inside a responsive box on a Wordpress theme.

When resizing, occassionally either the next slide comes into view, or the text on the current slide is cut off.

I'm trying to work out how I can hide the next panel when resizing, and ensure the text does not get cut off. Would be grateful for any pointers.

You can see the problem here (most apparent when shrinking window and then re-expanding): http://bit.ly/1v5ZTQ8

My carousel code looks like this:

   <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>

And I'm attempting to manage the size of the items as follows (following the example on the jCarousel webpage)

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

and this is my css for the carousel

.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;
}

Foreign Object Foreign Object · Accepted Answer · 2014-06-25T16:37:36

If the current slide has an active class you could do :

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

If there's no active class you could you could do the same thing using the current index

   function handleResize(){

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

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

     }

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

And then when the resize event is complete, set the opacity back to 1 or remove the is-hidden class

Hiding next slide when resizing a jQuery Carousel

1 Answers