0

自分のWebサイトの1つでスライドショーにSlidertronlibを使用しています。しかし、いくつかの解像度に応じてそれを見ると、現在のスライドの次のスライドを見ることができますが、これは発生しないはずです。

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の区切りを確認するために、2つの境界線を追加しました。

4

1 に答える 1

0

CSSの.viewer&の間に 25 ピクセルの違いがあります。.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 に答える