Logos Slider

[Amer-Moh]

Hello, I'm trying to create a logos slider using js vanilla, but somehow I get something wrong and the slides are shifted to left, first and last slides are showing half, I tried to fix that using css but I couldn't. Is there any custom options for this kind of sliders ( Logos Slider / 4 items slider )?

--js--- var emblaNode = document.querySelector('.embla') var options = { loop: true } var plugins = [EmblaCarouselAutoplay()] // Plugins

var embla = EmblaCarousel(emblaNode, options, plugins) ---js--

--css-- .embla { overflow: hidden; margin-bottom: 3.6rem; } .embla__container {
display: flex; justify-content:flex-start; gap:10px;

} .embla__slide { flex: 0 0 25%; min-width: 0;
text-align: center;
}

@media(max-width:768px){ .embla{ margin-top: 3.6rem; } .embla__slide { flex: 0 0 100%; }
}

.embla__slide img{ max-height: 70px; } --css--

[davidjerleke]

Hi @Amer-Moh,

Is there any custom options for this kind of sliders ( Logos Slider / 4 items slider )?

You can set slidesToScroll: 'auto' and Embla will group slides for you.

In your embla__container CSS, remove justify-content:

.embla__container {
  display: flex;
- justify-content:flex-start;
  gap: 10px;
}

...so it is this instead:

.embla__container {
  display: flex;
  gap: 10px;
}

Always use the align option instead of trying to align with flex-box when using Embla. Other than that, if you're still experiencing problems, I can't help you much more unless you create a CodeSandbox that demonstrates the problem so I can investigate if you're doing anything else wrong.

I want to mention that you should create a new discussion instead of an issue for these kind of questions.

Best, David

[Amer-Moh]

Thank you for your reply, align: 'start' works for me :)

[davidjerleke]

@Amer-Moh so did I understand you correctly that your problem has been solved?