Question

我有一个响应式网站，其中包含一个用户可以浏览的图片滑块。

当他们点击最后一张幻灯片上的“右侧”按钮时，我可以让幻灯片显示返回到第一张幻灯片，而最后一张幻灯片的右边缘没有进入窗口太远。这是通过检查视口宽度与容器div的宽度来完成的（参见下面左侧按钮的点击处理程序）。

我的问题是：我如何制作它，以便在第一张幻灯片中发生与最后一张幻灯片相同的事情。（无论如何，我从不希望容器的左边缘超过0px）。我尝试使用第一张幻灯片和最后一张幻灯片一样，但它没有工作，请看下面：

以下是滑块的标记：

<section id="photoGallery">
         <div id="slides">
             <div class="slide"></div>
             <div class="slide"></div>
             <div class="slide"></div>
             <div class="slide"></div>
             <div class="slide"></div>
             <div class="slide"></div>
        </div>
        <!--left and right buttons-->
        <div id="left" data-dir="left"></div>
        <div id="right" data-dir="right"></div>
    </section>

容器div是“幻灯片”，它正在被移动。

这是我的脚本的点击处理程序和转换功能：

//click handlers
leftButton.on('click', function(){
    var viewport = $(window).width();
    var slidesContainerLeftEdge = $('#slides').get(0).getBoundingClientRect().left;
    var slidesContainer = $('#slides').width();

    if (slidesContainerLeftEdge == 0) { //if on first image (this is not working, help!)
        slides.animate({marginLeft: ""+-(slideShowLimiter * 320)+"px"}, 200);
        console.log("working");
    } else {
        transition("+=");
    }
});

rightButton.on('click', function(){
    var viewport = $(window).width();
    var slidesContainerEdge = $('#slides').get(0).getBoundingClientRect().right;
    var slidesContainer = $('#slides').width();

    if (slidesContainerEdge < viewport + 320) { //if last slide
        slides.animate({marginLeft:"0px"}, 200);
    } else {
        transition("-=");
    }
});

function transition(direction) {
        slides.animate({marginLeft: ""+direction+""+movement+"px"}, 200);
    }

希望你们能帮助我摆脱困境。提前谢谢！

Answer 1

if(0 >=slidesContainerLeftEdge > -320){ // if first slide
slides.animate({marginLeft: ($(window).width()-$('#slides').width())+"px"}, 200);
}else{
//...
}

只是按照你用于右键单击的逻辑，所以当它是左边的第一张幻灯片时，你将向左移动幻灯片（通过设置左边距），使其右侧与右侧的幻灯片相匹配窗口。

请参阅完整代码：

leftButton.on('click', function(){
    var viewport = $(window).width();
    var slidesContainerLeftEdge = $('#slides').get(0).getBoundingClientRect().left;
    var slidesContainer = $('#slides').width();

    if (0 >=slidesContainerLeftEdge > -320) {
        slides.animate({marginLeft: (viewport-slidesContainer)+"px"}, 200);
    } else {
        transition("+=");
    }
});

响应式Javascript图像滑块，管理状态变化

1 个答案: