3

As is seem image below, total item slot is 7, but source are dynamic and sometimes its 3 or 4.. How to centeralize these items properly using glidejs

Source code preview:

<Slider element="glide" options={{ perView: 7 }}>
    {Object.entries(subSliderItems)
    .map(([key, value]) => (
        <div className="glide__slide" key={key}>
        <BoxSubCategory label={key} url={value} />
        </div>
    ))}
</Slider>
blazej
  • 927
  • 4
  • 11
  • 21
Baskent Mobil
  • 31
  • 1

2 Answers2

0

I just came across this issue today, and after a bit of poking around found the solution to be surprisingly simple.

.glider-track {
    margin: auto;
}

The div .glider-track is added to the dom as a wrapper for your slides so centring them within this will do the trick.

UntitledGraphic
  • 1,234
  • 2
  • 14
  • 23
0
.glide * {
  margin: 0 auto;
}

Add this to your CSS so it will make your content in the center.

Tanzeel Saleem
  • 802
  • 10
  • 16