0

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

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 的界限。

4

1 回答 1

0

您的 CSS 中.viewer&之间有 25px 的差异！.reel

对我来说，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*/
于 2013-08-01T20:17:07.750 回答