单击左箭头时，div 图像滑块向左移动答案

【问题标题】：div image slider goes to far left when clicking left arrow单击左箭头时，div 图像滑块向左移动
【发布时间】：2017-11-10 14:33:21
【问题描述】：

我有一个父 div，它是 594vw 宽，其中有 8 个 div，每个 50vw 宽 + 16 总边距 = 66vw。我想在两边都有箭头，如果你点击其中一个，它应该向左或向右滑动 66vw。虽然右箭头工作得非常好并且回到 594vw 到零点，但我仍然无法到达左侧，意思是：

如果我单击第一张图像上的左箭头（前进 +66vw），它应该会反弹回 0vw，而当我在 div 2-8 上时，它应该只会回到 +=66vw 步长。

如何将 click 函数与 if 函数结合使用？

我想单击左箭头将每个 66vw 返回到上一个图像/div，但如果父 div 的“left”参数超过 +66vw，我希望它返回到第一个图像。

仅此一项就可以正常工作（没有 div 在 +66vw 处返回，只是每 66vw 步无休止地返回）：

$( ".arrow_left" ).click(function(e) {
$("#instafeed").animate({ left: "+=66"+'vw' }, "slow" )});

但是一旦我添加了这段代码，无论我从哪一点点击左箭头，它每次都会跳到点 0（所以无论 div 1、2、3 是否都回到 0）

if($('#instafeed[style*="left: 66vw"]') ){
click = 1; 
$("#instafeed").animate({ left: "0"+'vw'  }, "slow" )}; });

我已经尝试过 CSS 选择器和 JavaScript，但没有成功，我真的想在 vw 中执行此操作，而不是在 px 中。我已经看到如何将px 转换为vw，但它对我不起作用，而且它太复杂了。

【问题讨论】：

标签： jquery jquery-animate viewport-units

【解决方案1】：

来自评论中的 OP：

我真的解决了。

只需使用offset().left 并将其设置为 > 0，然后添加 if 条件即可。

var click = 1;
$(".arrow_left").click(function(e) {
    var widths = 66 * click;
    $("#instafeed").first().animate({
        "left": "+=66" + 'vw'
    }, "slow").next().animate().end();
    click++;
    if ($('#instafeed').offset().left > 0) {
        click = 1;
        $("#instafeed").animate({
            "left": "0" + 'vw'
        }, "slow")
    }
});

【讨论】：