Infinitum — Examples

Infinite loop of HTML elements. Designed primarily for tab-like navigations.

Example 1 — Tab Navigation (start mode)

<div class="example1__infinitum"><!-- required -->
    <ul class="example1__track"><!-- required -->
        <li class="example1__item"><!-- required -->
            <a class="example1__tab-title" href="#">Animals</a><!-- not required -->
        </li>
        …
    </ul>
</div>

<ul class="example1__tabs">
    <li class="example1__tab example1__tab--active">
        <img src="http://lorempixel.com/512/512/animals/10/" alt="" class="example1__img">
        …
    </li>
    …
</ul>
.example1__track {
    display: flex;
    flex-flow: row nowrap;
}

    .example1__item {
        /*must be non-breakable*/
        /*must not have transform, transition and opacity property*/
        /*there must not be any space between items*/
    }

        .example1__item .example1__tab-title {
            color: #aaa;
        }

        .example1__track:not(.infinitum__track--moving) .example1__item:hover .example1__tab-title {
            color: darkslategray;
        }

        .infinitum__item--possible-current .example1__tab-title,
        .example1__track:not(.infinitum__track--dragging) .infinitum__item--current .example1__tab-title {
            color: #444;
        }
var example1 = new Infinitum(".example1__infinitum");

var $tabs = $(".example1__tab");

example1.on("change", function (event) {

    var $item = $(event.target);

    $tabs.removeClass("example1__tab--active")
        .eq($item.index())
        .addClass("example1__tab--active");
});

Example 2 — Filter (center mode)

This example is using Filterizr.

<div class="example2__infinitum">
    <ul class="example2__track">
        <li class="example2__item" data-category="all">
            <a class="example2__filter-title" href="#">All</a>
        </li>
        …
    </ul>
</div>

<div class="example2__images">
    <div class="example2__image filtr-item" data-category="2">
        <img src="http://lorempixel.com/512/512/city/4/" alt="" class="example2__img" width="256" height="256">
    </div>
    …
</div>
.example2__track {
    font-size: 0;
    white-space: nowrap;
}

    .example2__item {
        /*still must be aligned to the left*/
        display: inline-block;
    }

        .example2__item .example2__filter-title {
            color: #aaa;
        }

        .example2__track:not(.infinitum__track--moving) .example2__item:hover .example2__filter-title {
            color: darkslategray;
        }

        .infinitum__item--possible-current .example2__filter-title,
        .example2__track:not(.infinitum__track--dragging) .infinitum__item--current .example2__filter-title {
            color: #444;
        }
var example2 = new Infinitum({
    selector: ".example2__infinitum",
    mode: Infinitum.POSITION.CENTER,
    current: 0 //current item will be the first element (.example2__item)
});

var $images = $(".example2__images");

example2.on("change", function (event) {

    var $item = $(event.target);

    $images.filterizr("filter", $item.data("category"));
});

Example 3 — Live (end mode)

<div class="example3__infinitum">
    <ul class="example3__track">
        <li class="example3__item">
            <a class="example3__tab-title" href="#">Animals</a>
        </li>
        …
    </ul>
</div>

<ul class="example3__tabs">
    <li class="example3__tab example3__tab--active">
        <img src="http://lorempixel.com/512/512/animals/10/" alt="" class="example3__img">
        …
    </li>
    …
</ul>
.example3__track {
    display: flex;
    flex-flow: row nowrap;
}

    .example3__item {
        /*still must be aligned to the left*/
    }

        .example3__item .example3__tab-title {
            color: #aaa;
        }

        .example3__track:not(.infinitum__track--moving) .example3__item:hover .example3__tab-title {
            color: darkslategray;
        }

        .infinitum__item--possible-current .example3__tab-title,
        .example3__track:not(.infinitum__track--dragging) .infinitum__item--current .example3__tab-title {
            color: #444;
        }
var example3 = new Infinitum({
    el: $(".example3__infinitum"),
    mode: Infinitum.POSITION.END,
    endBreak: Infinitum.POSITION.END, //breaks end item immediately after its right edge overflows
    current: 0 //current item will be the first element (.example3__item)
});

var $tabsWrapper = $(".example3__tabs"),
    $tabs = $tabsWrapper.find(".example3__tab");

example3.on("change possiblechange", function (event, infinitum) {

    //do not change tabs when "possiblechange" is not called by dragging the track
    if (event.type === "possiblechange" && !infinitum.dragging()) {

        return;
    }

    var $item = $(event.target);

    $tabs.removeClass("example3__tab--active")
        .eq($item.index())
        .addClass("example3__tab--active");
});

var lastEvent = Date.now();

//speed up tab switching when scrolling, dragging or keys are used
example3.on("scroll key tap dragging dragend", function (event) {

    if (event.type.match(/tap|dragend/) || Date.now() - lastEvent > 500) {

        $tabsWrapper.removeClass("speed-up");

    } else {

        $tabsWrapper.addClass("speed-up");
    }

    lastEvent = Date.now();
});

Example 4 — Number selector

It's possible to use both at the same time (multi-touch).

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30 
<div class="example4__infinitum example4__infinitum--1">
    <ol class="example4__track">
        <li class="example4__item">
            <a class="example4__number" href="#">1</a>
        </li>
        …
    </ol>
</div>
.example4__infinitum {
    overflow: hidden;
}

    .example4__track {
        font-size: 0;
        white-space: nowrap;
    }

        .example4__item {
            /*still must be aligned to the left*/
            display: inline-block;
        }

            .example4__item .example4__number {
                color: #aaa;
            }

            .example4__track:not(.infinitum__track--moving) .example4__item:hover .example4__number {
                color: darkslategray;
            }

            .infinitum__item--possible-current .example4__number,
            .example4__track:not(.infinitum__track--dragging) .infinitum__item--current .example4__number {
                transform: scale(1.25);

                color: #444;
            }
var example4 = new Infinitum({
    selector: ".example4__infinitum--1",
    mode: Infinitum.POSITION.CENTER,
    fade: false, //no fade effect (won't be visible)
    currentIn: Infinitum.CURRENT.STILL_INSIDE, //as current will be used the item, which is in the center of the widget; Infinitum.CURRENT.FULL has the same effect
    currentOut: Infinitum.CURRENT.STILL_INSIDE, //not necessary; it will use value from the currentIn option, because mode is Infinitum.POSITION.CENTER
    current: 0,

    keyThrottle: 60,
    wheelThrottle: 25
});

Example 5 — Methods

<div class="example5__infinitum">
    <ul class="example5__track">
        <li class="example5__item">
            <a href="#" class="example5__image">
                <img src="http://lorempixel.com/512/512/animals/10/" alt="" class="example5__img">
            </a>
        </li>
        …
    </ul>
</div>
.example5__track {
    display: flex;
    flex-flow: row nowrap;
}

    .example5__item {
        width: 25%;
        flex-shrink: 0;
    }

        .example5__item .example5__image {
            padding: 4px 2px;
        }

            .example5__item .example5__img {
                opacity: 0.8;
                filter: grayscale(1);
            }

            .example5__track:not(.infinitum__track--moving) .example5__item:hover .example5__img {
                opacity: 1;
            }

            .infinitum__item--possible-current .example5__img,
            .example5__track:not(.infinitum__track--dragging) .infinitum__item--current .example5__img {
                filter: grayscale(0);
                opacity: 1;
            }
var example5 = new Infinitum({
    selector: ".example5__infinitum",
    breakAll: true, //always moves all item
    clearEdge: false, //items may remain on the left
    currentIn: Infinitum.CURRENT.FULL //as current will be used item, which is fully inside the widget (if moving in the direction — left)
});

var $buttons = $(".example5__button"),
    $select = $(".example5__select");

$buttons.on("click touchend", function (event) {

    event.preventDefault();

    var moveMethod = this.className.match(/--(prev|next)/);

    if (moveMethod) {

        //example5.next();
        //example5.prev();
        example5[moveMethod[1]]();

        return;
    }

    example5[example5.disabled ? "enable" : "disable"]();

    this.innerText = example5.disabled ? "Enable" : "Disable";
    this.title = example5.disabled ? "example5.enable()" : "example5.disable()";
});

$select.on("change", function () {

    example5.setCurrent(Number(this.value));
});

example5.on("change", function (event) {

    $select.val($(event.target).index());
});