<p><meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"></p>
<style>
    body {
        font-family: sans-serif;
        margin: 20px;
    }
    .carousel {
        overflow: hidden;
        width: 800px;
        margin: 0 auto;
        position: relative; /* Necessário para posicionar os controles (opcional) */
    }
    .carousel-inner {
        display: flex;
        transition: transform 0.3s ease-in-out;
    }
    .logo {
        flex: 0 0 200px;
        height: 200px;
        margin: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd;
        box-sizing: border-box;
    }
    .logo img {
        max-width: 100%;
        max-height: 100%;
    }
    /* Estilos opcionais para os botões de controle */
    .carousel-control {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: #333;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 10;
    }
    .carousel-control.prev {
        left: 10px;
    }
    .carousel-control.next {
        right: 10px;
    }
</style>
<p><span style="color: rgb(0, 170, 255);">A Lasled tem orgulho de trabalhar com uma variedade de clientes, desde municípios e empresas privadas até grandes projetos de infraestrutura nacionais e internacionais. </span></p>
<p><span style="color: rgb(0, 170, 255);">Veja alguns dos nossos clientes e projetos de destaque:</span></p>
<div class="carousel">
    <div class="carousel-inner">
        <div class="logo"><img alt="Logo 1" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/mercedez_430x.png?v=1743464204"></div>
        <div class="logo"><img alt="Logo 2" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/ilha_bela_430x.png?v=1743463369"></div>
        <div class="logo"><img alt="Logo 3" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/Itaipu_430x.png?v=1743464498"></div>
        <div class="logo"><img alt="Logo 4" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/Sesc_430x.png?v=1743464783"></div>
        <div class="logo"><img alt="Logo 5" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/Sabesp_430x.png?v=1743464786"></div>
        <div class="logo"><img alt="Logo 6" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/governo_SP_430x.png?v=1743465494"></div>
        <div class="logo"><img alt="Logo 7" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/Niterra_430x.png?v=1743465501"></div>
        <div class="logo"><img alt="Logo 8" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/governo_SC_430x.png?v=1743465499"></div>
        <div class="logo"><img alt="Logo 9" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/coorPlastik_430x.png?v=1743465504"></div>
        <div class="logo"><img alt="Logo 10" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/GovernoFederal_430x.png?v=1743466352"></div>
        <div class="logo"><img alt="Logo 12" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/Casa_da_moeda_430x.png?v=1743466355"></div>
        <div class="logo"><img alt="Logo 13" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/enel_430x.png?v=1743466924"></div>
        <div class="logo"><img alt="Logo 14" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/bombril_430x.png?v=1743466934"></div>
        <div class="logo"><img alt="Logo 15" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/cpfl_430x.png?v=1743466941"></div>
        <div class="logo"><img alt="Logo 16" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/castelao_430x.png?v=1743467232"></div>
        <div class="logo"><img alt="Logo 17" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/estado_parana_430x.png?v=1743467395"></div>
        <div class="logo"><img alt="Logo 18" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/farma_conde_430x.png?v=1743467781"></div>
        <div class="logo"><img alt="Logo 19" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/globo_430x.png?v=1743467953"></div>
        <div class="logo"><img alt="Logo 20" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/Gov_amazonas_430x.png?v=1743468314"></div>
        <div class="logo"><img alt="Logo 21" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/ducati_430x.png?v=1743468484"></div>
        <div class="logo"><img alt="Logo 22" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/usp_430x.png?v=1743468705"></div>
        <div class="logo"><img alt="Logo 23" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/PALACIO_430x.png?v=1743469777"></div>
        <div class="logo"><img alt="Logo 24" src="https://cdn.shopify.com/s/files/1/0779/2915/2795/files/STATEGRID_430x.png?v=1743470131"></div>
    </div>
</div>
<p> </p>

<script>
    const carouselInner = document.querySelector('.carousel-inner');
    const logos = document.querySelectorAll('.logo');
    const logoWidth = logos[0].offsetWidth + 20; // Largura de um logo + sua margem direita
    let currentIndex = 0;

    function nextSlide() {
        currentIndex++;
        if (currentIndex >= logos.length) {
            currentIndex = 0;
        }
        updateCarousel();
    }

    function updateCarousel() {
        const translateValue = -currentIndex * logoWidth;
        carouselInner.style.transform = `translateX(${translateValue}px)`;
    }

    // Define o intervalo para a troca automática (ex: 3000ms ou 3 segundos)
    setInterval(nextSlide, 3000);

    // Código opcional para os botões de controle
    /*
    const prevButton = document.querySelector('.carousel-control.prev');
    const nextButton = document.querySelector('.carousel-control.next');

    prevButton.addEventListener('click', () => {
        currentIndex--;
        if (currentIndex < 0) {
            currentIndex = logos.length - 1;
        }
        updateCarousel();
    });

    nextButton.addEventListener('click', () => {
        nextSlide();
    });
    */
</script>

Nossos Clientes