Question

我在Wordpress主题的响应框内运行了一个基本的jQuery轮播。

调整大小时，偶尔会有下一张幻灯片进入视图，或者当前幻灯片上的文字被切断。

我正在尝试弄清楚如何在调整大小时隐藏下一个面板，并确保文本不会被切断。如有任何指示，将不胜感激。

你可以在这里看到问题（当缩小窗口然后重新扩展时最明显）： 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;
}

Answer 1

如果当前幻灯片有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类

调整jQuery Carousel大小时隐藏下一张幻灯片

1 个答案: