De Code

Een marquee logo-slider is een handige manier om samenwerkingen, sponsoren of klantlogo’s dynamisch en aantrekkelijk te tonen. Het bespaart ruimte, houdt je website visueel interessant en zorgt ervoor dat bezoekers belangrijke merken moeiteloos zien. Ideaal voor vertrouwen!

<style>

.marquee_item {
gap: 2rem;
}

.logo-marquee-wrapper {
gap: 2rem;
}

.is_logo_in_marquee {
width: auto;
height: 100px;
}

.scroll {
animation: scroll 30s linear infinite;
}

.marquee_item {
display: flex;
gap: 6rem;
height: 200px;
overflow: hidden;
position: relative;
}

.logo-marquee-wrapper {
flex: none;
display: flex;
justify-content: space-around;
align-items: center;
gap: 6rem;
height: 100%;
min-width: 100%;
overflow: hidden;
}

.logo_wrapper {
display: flex;
align-items: center;
justify-content: center;
}

@media screen and (max-width: 768px) {
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - 2rem));
}
}
}

@media screen and (max-width: 991px) {
.is_logo_in_marquee {
height: 80px;
}
}

@media screen and (max-width: 479px) {
.is_logo_in_marquee {
height: 60px;
}
}

@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - 6rem));
}
}

</style>

‍

Hoe te gebruiken

Kopiër de code en zet hem in een embedded code. Gebruik de volgende opbouw voor de marquee slider.
‍

<marquee_wrap>
       <marquee_contain>
              Embedded code
              <marquee_item>
                      <logo-marquee-wrapper>
                      <logo-marquee-wrapper>
                           <logo_wrapper>
                                  (Image)<is_logo_ in_marquee>
‍
Tip: Je kan van logo-wrapper een component maken. Ook van logo-marquee-wrapper kan je een component maken aangezien deze inhoud identiek moeten zijn om de marquee te laten werken.