Question

我有一个用css动画的自定义滑块。由flexbox逻辑设置的尺寸。来自slider-containers父级。 slider-container有溢出：隐藏，.all-slides是300％宽并随着transform（translate）移动，每个幻灯片都是100％宽。

所有jQuery需要做的是获取[data-activate-slide]值并使用某些类。但是你每按5-15次点击一次触发它就不会触发事件。同时我不知道为什么！重新划分元素时，它可以在95％的时间内工作。在5％的失败中，另一次重新启动和点击在我的测试中100％工作。

奇怪的是，它通常不起作用＆＃34; initial＆＃34; /＆＃34;第一次＆＃34; - 分页。

我使用jQuery 3.0.0。相同的行为改变2.x- 我不愿意（时间不允许）用不同的方法重写整个事物。我也不想使用外部滑块。

在这里您可以观看实时示例： http://rrg.kreativzirkel.de/dienstleistungen

var ClickOrTap = (Modernizr.touchevents) ? "tap" : "click";

$("[data-activate-slide]").on(ClickOrTap, function(e) {

    // often doesn't even get to here
    console.log("activate-slide clicked");

    var toIndex = $(this).attr("data-activate-slide");
    var $container = $(this).parents(".slider-container");
    var $slides = $(".all-slides", $container);
    var $pagination = $(".pagination", $container);

    $slides.removeClass("slide-active-1 slide-active-2 slide-active-3");
    $slides.addClass("slide-active-" + toIndex);

    $pagination.children("div").removeClass("active").eq(toIndex - 1).addClass("active"); // active richtig setzen       
})

<div class="slider-container">
    <div class="all-slides">
        <div class="slide">...</div>
        <div class="slide">...</div>
        <div class="slide">...</div>
        <div class="slide">...</div>
    </div>
    <div class="pagination">
        <div class="active" data-activate-slide="1">1</div>
        <div data-activate-slide="2">2</div>
        <div data-activate-slide="3">3</div>
    </div>
</div>

.slider-container {

    overflow:hidden;

    .all-slides {

        width: 300%;
        .flexbox(row, flex-start, center);

        .slide { 
            width: 100%;
        }

        .transition(all 200ms ease-in-out);
        &.slide-active-1 { .translate(0); }
        &.slide-active-2 { .translate(calc(-100% * 1/3)); }
        &.slide-active-3 { .translate(calc(-100% * 2/3)); }

    }
}

自定义滑块 - jQuery点击不定期触发

0 个答案: