Wtyczka: Ninja Śmigacz – Niekończące się przewijanie płynnej karuzeli obiektów

Ninja Śmigacz to wtyczka WordPress, która pozwala na stworzenie płynnie przewijającej się karuzeli obiektów. Dzięki temu użytkownicy mogą cieszyć się niekończącym się przewijaniem zawartości bez przerw. Wtyczka jest łatwa do zaimplementowania i wykorzystuje HTML, CSS, i JavaScript/jQuery.

ninja-smigacz.css

.smigacz {
    overflow: hidden;
    display: flex;
    white-space: nowrap;
}

.marka {
    flex: 0 0 200px; /* Stała szerokość każdego elementu */
    width: 200px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

JavaScript/jQuery: ninja-smigacz.js

jQuery(document).ready(function() {
    const szerokoscMarki = 200; // Szerokość jednego elementu
    const czasAnimacji = 500; // Czas trwania animacji w ms
    const czasPauzy = 500; // Pauza między animacjami w ms

    jQuery('.smigacz').each(function() {
        const jQuerysmigacz = jQuery(this);
        const marki = jQuerysmigacz.find('.marka').clone();

        function setupCarousel() {
            jQuerysmigacz.empty().append(marki).append(marki.clone());
        }

        function przesunMarki() {
            function autoScroll() {
                jQuerysmigacz.animate({scrollLeft: '+=' + szerokoscMarki}, czasAnimacji, 'linear', function() {
                    const firstMark = jQuerysmigacz.find('.marka:first');
                    firstMark.appendTo(jQuerysmigacz);
                    jQuerysmigacz.scrollLeft(jQuerysmigacz.scrollLeft() - szerokoscMarki);
                    setTimeout(autoScroll, czasPauzy);
                });
            }
            autoScroll();
        }

        setupCarousel();
        przesunMarki();
    });
});

HTML: Dodaj kod HTML do strony, aby utworzyć strukturę karuzeli.

<div class="smigacz">
    <div class="marka"><img alt="" src="link_do_obrazu"></div>
    <!-- Dodaj więcej elementów .marka z odpowiednimi obrazami -->
</div>
ninja-smigaczPobierz
    Wróć