css - jQuery Slidertron 溢出

Question

我正在使用 Slidertron lib在我的一个网站上播放幻灯片。但是，当我根据某些分辨率查看它时，我可以在当前幻灯片中看到下一张幻灯片，这是不应该发生的。

CSS:

#slider {margin-left:auto;margin-right:auto;width:100%;position:relative;}
#slider .viewer {width:75%;height:400px;margin:0 auto;overflow:hidden;border:1px solid red;}
#slider .viewer .reel {display:none;height: 375px;}
#slider .slide {border:1px solid blue;}
#slider .viewer .reel .slide {position: relative;width:1100px;height:375px;}

HTML:

  <div id="slider">
            <div class="indicator">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </div>
        <div class="viewer">
            <div class="reel">
                <div class="slide">
                    <img class="title" src="/Content/1.png" alt="" />
                    <p class="paragraph">Slide 1 text.</p>
                    <img class="image" src="/Content/2.png" alt="" />
                </div>
                <div class="slide">
                    <img class="title" src="/Content/Img1.png" alt="" />
                    <p class="paragraph">Slide 2 text.</p>
                    <img class="image" src="/Content/Img2.png" alt="" />
                </div>
            </div>
        </div>
    </div>

jQuery(有点不相关，因为它运行良好):

        $(function () {
        $('#slider').slidertron({
            viewerSelector: '.viewer',
            reelSelector: '.viewer .reel',
            slidesSelector: '.viewer .reel .slide',
            indicatorSelector: '.indicator span',
            speed: 'slow',
            navPreviousSelector: '.previous',
            navNextSelector: '.next',
            advanceDelay: 40000
        });
    });

仅供引用，我添加两个边框只是为了查看我的 div 的分隔。

Answer 1

您的 CSS 中的 .viewer 和 .reel 之间有 25 像素的差异!

对我来说，jquery.slidertron 的最佳工作方式是我用 css 严格地告诉他图像大小。

/*slider*/
#slider {
    margin: 0 auto;
    position: relative;
    width: 960px;
    height: 300px;
}
#slider .viewer {

    width: 960px;
    height: 300px;
    overflow: hidden;
}
#slider .viewer .reel {

    display: none;
    width: 960px;
    height: 300px;
}
#slider .viewer .reel .slide {

    position: relative;
    width: 960px;
    height: 300px;
}
/*slider*/