Infinite Flicking

Append & Prepend panel dynamically

• You can dynamically add panels to the flicking.
• The panel's indexes are zero-based integer.
• Note: The number displayed above each panel is not panel's index.

var prev = 0;
var next = 4;
var flicking0 = new eg.Flicking(".flicking0", {
    gap: 10,
});

document.querySelector("#prepend").addEventListener("click", function () {
    prev -= 2;
    flicking0.prepend(
        '<div class="infinite infinite' + Math.abs(prev) % 5 + '">' + (prev) + '</div>'
        + '<div class="infinite infinite' + Math.abs(prev + 1) % 5 + '">' + (prev + 1) + '</div>'
    );
    flickingPagination0.update(flicking0);
});
document.querySelector("#append").addEventListener("click", function () {
    next += 2;
    flicking0.append(
        '<div class="infinite infinite' + (next - 1) % 5 + '">' + (next - 1) + '</div>'
        + '<div class="infinite infinite' + next % 5 + '">' + next + '</div>'
    );
    flickingPagination0.update(flicking0);
});

infinite: true & needPanel event

• Enabling the infinite option can make needPanel event to be triggered when more panels at moving direction should be fetched within infiniteThreshold value.

var flicking1 = new eg.Flicking(".flicking1", {
    gap: 10,
    infinite: true,
    infiniteThreshold: 50,
});

flicking1.on("needPanel", function (e) {
    var length = flicking1.getPanelCount();

    e.fill(
        '<div class="infinite infinite' + (length + 1) % 5 + '">'+ (length + 1) + '</div>'
        + '<div class="infinite infinite' + (length + 2) % 5 + '">' + (length + 2) + '</div>'
    );
    flickingPagination1.update(flicking1);
});

infinite: true & placeholder

• You can make continuous carousel UI with asynchronous data by adding placeholder panel first, then update panel with fetched data later.

var flicking2 = new eg.Flicking(".flicking2", {
    gap: 10,
    infinite: true,
    moveType: "freeScroll"
});

flicking2.on("needPanel", function (e) {
    var length = flicking2.getPanelCount();

    /* placeholder */
    var panels = e.fill(
        '<div class="infinite placeholder infinite' + (length + 1) % 5 + '">'+ (length + 1) + '</div>'
        + '<div class="infinite placeholder infinite' + (length + 2) % 5 + '">' + (length + 2) + '</div>'
    );
    flickingPagination2.update(flicking2);
    /* insert data */
    setTimeout(function () {
        panels.forEach(function (panel) {
            panel.update(function (el) {
                el.className = el.className.replace(/\s*placeholder/g, "");
            });
        });
    }, 1500);
});

🚀 Increasing performance

• You can increase performance by enabling renderOnlyVisible, isEqualSize, and isConstantSize of Flicking
• See its effect: https://www.youtube.com/watch?v=R-DKq-fqeSI
• Check the details of the options: Link

    var flicking3 = new eg.Flicking(".flicking3", {
        renderOnlyVisible: true,
        isEqualSize: true,
        isConstantSize: true,
        infinite: true,
        gap: 10,
        duration: 5,
        moveType: "freeScroll"
    });

    flicking3.on("needPanel", function (e) {
        var panels = e.fill([
            '<div class="infinite infinite' + e.range.min % 5 + '">'+ e.range.min + '</div>',
            '<div class="infinite infinite' + (e.range.min + 1) % 5 + '">' + (e.range.min + 1) + '</div>'
        ]);
    });
    document.querySelector("#start").addEventListener("click", function () {
        flicking3.on("moveEnd", function(e) {
            flicking3.next();
        });
        flicking3.next();
    });
    document.querySelector("#stop").addEventListener("click", function () {
        flicking3.off("moveEnd");
    });