podmiana zdjęć jak w karuzeli

Question

Witam, chciał bym uzyskać efekt karuzeli jak na tej stronie https://www.cukeragency.com/ w sekcji "We work with forward-thinking brands we believe in.", czyli chodzi o zmienianie tych logotypów.

Kod HTML:

            <div class="logos">
                <a href="" class="logos__item">
                    <img src="./img/logo-1.png" alt="">
                </a>
                <a href="" class="logos__item">
                    <img src="./img/logo-2.png" alt="">
                </a>
                <a href="" class="logos__item">
                    <img src="./img/logo-3.png" alt="">
                </a>
                <a href="" class="logos__item">
                    <img src="./img/logo-4.png" alt="">
                </a>
            </div>

przy zmianie dodaje klasę: .logo-up

    .logos-up {
        transform: translateY(-100%);
        opacity: 0;
    }

początkowy js o prócz tego mam tablicę 12 logotypów które by miały się zmieniać.

const logosItems = document.querySelectorAll('.logos__item');


if (logosItems) {
    var i = 0;

    logosItems.forEach((item, index) => {
        if (i == 0) {
            setTimeout(() => {
                item.classList.add('logo-up');
            }, index * 200);
        }
    })

}

Jakieś podpowiedzi albo sugestię jak uzyskać taki efekt, albo czy są gotowe takie slidery.

Answer 1

Proponuję zamienić setTimeout na setInterval i pętle wykonać we "wnętrzu" setInterval

[ on-line ]

window.onload = load;

function load() {
  const logos_item = document.querySelectorAll('.logos__item');
  
  setInterval(() => {
    for (const item of logos_item)
      item.classList.toggle('logo-down');
  }, 1250);
}

 

i zamiast tego zapisu

}, index * 200);

użyć zapisu w css

.logos__item:nth-child(2) {
  transition-delay: 100ms;
}
.logos__item:nth-child(3) {
  transition-delay: 200ms;
}
.logos__item:nth-child(4) {
  transition-delay: 300ms;
}

 

 

kwestię podmiany obrazków dla kolejnego kroku animacji pozostawiam Tobie do zaimplementowania.

Podpowiedź, może się przydać

  setInterval(() => {
    for (const item of logos_item)
      item.classList.toggle('logo-down');

    // dla demonstracji
    console.log(index); 
    index += logos_item.length;  
  }, 1250, index=0);