Как ускорить движение слайдера?

[Lefseq]

Здравствуйте. Подскажите, как ускорить движение слайдера в данном коде? Выставил максимум, но смена строк все-равно не достаточно быстрая.

<ul id="ticker_02" class="ticker">
        <li>
            первая строка
        </li>
        <li>
            вторая строка
        </li>
        <li>
            третья строка
        </li>
        <li>
            четвертая строка
        </li>
                <li>
            пятая строка
        </li>
    </ul>

function tick2(){
        $('#ticker_02 li:first').slideUp( function () { $(this).appendTo($('#ticker_02')).slideDown(); });
    }
    setInterval(function(){ tick2 () }, 1);

[laimas]

Выставил максимум

Где?

[рони]

Lefseq,
https://javascript.ru/forum/dom-wind...tml#post430374
поиск по форуму бесконечная

лучше забыть что есть setInterval

[ksa]

поиск по форуму бесконечная

Расширяется список "терминов"...

[Lefseq]

https://javascript.ru/forum/dom-wind...tml#post430374

Рони, а можете превратить эту карусель в вертикальную, убрать стрелки, убрать паузу при наведении курсора и паузу между движениями?

[рони]

Lefseq,
на основе варианта от Malleys,
https://javascript.ru/forum/dom-wind...tml#post514440

<text-display>
    <img src="https://picsum.photos/300/100?1">
    <img src="https://picsum.photos/300/100?2">
    <img src="https://picsum.photos/300/100?3">
    <img src="https://picsum.photos/300/100?4">
    <img src="https://picsum.photos/300/100?5">
    <img src="https://picsum.photos/300/100?6">
    <img src="https://picsum.photos/300/100?7">
    <img src="https://picsum.photos/300/100?8">
    <img src="https://picsum.photos/300/100?9">
</text-display>

<style>

text-display {
    background: linear-gradient(to bottom, #333, black);
    background-color: #111;
    color: white;
    font: 900 1em / 1.5 monospace, system-ui;
    border-radius: 0.2em;
    white-space: nowrap;
    margin: 0.2em 0;
    width: 300px;
    height: 250px;
}

</style>

<script>

class TextDisplay extends HTMLElement {
    constructor() {
        super();

        const shadow = this.attachShadow({ mode: "closed" });
        const document = shadow.ownerDocument;
        const firstElement = document.createElement("div");
        const secondElement = document.createElement("div");
        const slot = document.createElement("slot");
        const observer = new MutationObserver(mutationHandler);

        shadow.innerHTML = `<style>
            :host {
                display: flex;
                overflow: hidden;
                flex-direction: column;
            }
            :host > div {
                min-width: 100%;
                will-change: transform;
                animation: text-display var(--text-display-duration, 15s) linear infinite;
                animation-direction: inherit;
                display: flex;
                flex: 1 0 auto;
                text-align: center;
                flex-direction: column;
            }
            :lang(ar), :lang(he) {
                animation-direction: reverse;
            }
            @keyframes text-display {
                to {
                    transform: translateY(-100%);
                }
            }
        </style>`;

        firstElement.append(slot);
        shadow.append(firstElement, secondElement);
        mutationHandler();

        observer.observe(this, {
            subtree: true,
            characterData: true,
            attributes: true,
            childList: true
        });

        function mutationHandler() {
            secondElement.textContent = "";

            for(const assignedNode of slot.assignedNodes())
                secondElement.append(assignedNode.cloneNode(true));
        }
    }
}

customElements.define("text-display", TextDisplay);

</script>

[Lefseq]

рони,
То что нужно! Спасибо большое.