Karuzela css z logotypami

Kategorie: wordpress

Strona główna » Blog » Karuzela css z logotypami

Kod html + css + jquery przygotowany do wordpressa do wyświetlania listy logotypów w karuzeli, na przykład do sekcji „nasi klienci”.

Kod korzysta z domyślnej biblioteki jquery zastosowanej w najnowszym silniku WordPress

//html

<div class="logo-carousel">
    <button class="carousel-arrow prev">‹</button>

    <div class="carousel-viewport">
        <div class="carousel-track">
            <!-- 10 logotypów -->
            <div class="logo"><img src="/wp-content/uploads/2025/12/arko-pasze.webp" alt=""></div>
<div class="logo"><img src="wp-content/uploads/2025/12/gospodarstwo-rolne-karol-podgorny.webp" alt=""></div>
            <div class="logo"><img src="/wp-content/uploads/2025/12/cofactor.webp" alt=""></div>
            <div class="logo"><img src="/wp-content/uploads/2025/12/gospodarstwo-rolne-szymanski.webp" alt=""></div>
            <div class="logo"><img src="/wp-content/uploads/2025/12/amrum.webp" alt=""></div>
            <div class="logo"><img src="/wp-content/uploads/2025/12/arko.webp" alt=""></div>
            <div class="logo"><img src="/wp-content/uploads/2025/12/floreco.webp" alt=""></div>
            
            <div class="logo"><img src="/wp-content/uploads/2025/12/gospodarstwo-rolne-piotr-podgorny.webp" alt=""></div>
            <div class="logo"><img src="/wp-content/uploads/2025/12/gospodarstwo-rolne-szymanski-stanislaw.webp" alt=""></div>

         
        </div>
    </div>

    <button class="carousel-arrow next">›</button>
</div>

//js

<script>
jQuery(function ($) {

    const $carousel = $('.logo-carousel');
    const $track = $carousel.find('.carousel-track');
    const $logos = $carousel.find('.logo');

    let index = 0;
    let visible = getVisible();
    let step = visible;

    function getVisible() {
        return window.innerWidth <= 768 ? 2 : 5;
    }

    function updateCarousel() {
        const logoWidth = $logos.outerWidth(true);
        const moveX = index * logoWidth;
        $track.css('transform', 'translateX(' + (-moveX) + 'px)');
    }

    $('.next').on('click', function () {
        const maxIndex = $logos.length - visible;

        if (index < maxIndex) {
            index += step;
            if (index > maxIndex) index = maxIndex;
            updateCarousel();
        }
    });

    $('.prev').on('click', function () {
        if (index > 0) {
            index -= step;
            if (index < 0) index = 0;
            updateCarousel();
        }
    });

    /* SWIPE */
    let startX = 0;

    $track.on('touchstart', function (e) {
        startX = e.originalEvent.touches[0].clientX;
    });

    $track.on('touchend', function (e) {
        const endX = e.originalEvent.changedTouches[0].clientX;
        if (startX - endX > 50) $('.next').click();
        if (endX - startX > 50) $('.prev').click();
    });

    $(window).on('resize', function () {
        visible = getVisible();
        step = visible;
        index = 0;
        updateCarousel();
    });

});
</script>

//css

.logo-carousel {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.carousel-viewport {
    overflow: hidden;
    width: 100%;
}

.carousel-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    transition: transform 0.4s ease;
    will-change: transform;
}

.carousel-track  .logo {
    flex: 0 0 20%;
    max-width: 20%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}

.carousel-track  .logo img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.carousel-track .logo:after{
	background:none;
	}

/* MOBILE */
@media (max-width: 768px) {
    .carousel-track  .logo {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* opcjonalnie – mniejsze strzałki */
    .carousel-arrow {
        font-size: 30px;
    }
}

.carousel-arrow {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 40px;
    padding: 10px;
    line-height: 1;
	color:#000000;
}
.carousel-arrow:hover {color:#000000;
}

//bigclick karuzela logo - do pliku finctions.php
function logo_carousel_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script(
        'logo-carousel',
        get_template_directory_uri() . '/js/carousel.js',
        array('jquery'),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'logo_carousel_scripts');