Question

大家好，我使用此插件http://www.jqueryscript.net/slider/Fullscreen-Horizontal-Page-Slider-with-jQuery-CSS3-HSlider.html，我希望在单页上有多个滑块。这是我的代码：

        height = $( window ).height() - 98;
    transalte = (height/2);
    $.each($('.gallery section'),function(i){
        $(this).css({
            position:"absolute",
            width:"100%",
            height: height+'px',
            left:i*100 +"%"
        }).addClass("section").attr("data-index", i+1);
        $(this).find(".img").css({
            minWidth: "100%",
            minHeight: "100%",
            position:"absolute",
            zIndex:5
        })
        $(this).find("article").css({
            position:"absolute",
            width:"100%",
            height: '100%',
            bottom:0,
            padding:42,
            zIndex:6,
            'transform':'translateY(-'+(height+10)+'px)',
            'color': 'white',
        })
    });


    <div class="gallery">
        <div class="slider">
            <section>
              <div class="img" style="background: url('images/london2.jpeg') no-repeat; background-size: cover;"></div>


            </section>
        </div>
    </div><!--end gallery -->

<div class="gallery">
        <div class="slider">
            <section>
              <div class="img" style="background: url('images/london2.jpeg') no-repeat; background-size: cover;"></div>


            </section>
        </div>


    </div><!--end gallery -->

我尝试在每个功能中重置i，但它不能正常工作。它将下一个数据索引添加到另一个库中的部分。有没有办法使用这个插件制作多个滑块？

Answer 1

你想要完成的是什么？通过查看demo和您的问题，在我看来，您想要将多个幻灯片（图片）添加到一个图库。

在这种情况下，将您的所有<section>移动到一个包裹<div>中并初始化插件，如页面所示。

$(".slider").HSlider();

这有帮助吗？

页面上有多个滑块

1 个答案: