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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With