Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to center items in glidejs without change settings

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>
like image 592
Baskent Mobil Avatar asked Oct 27 '25 05:10

Baskent Mobil


1 Answers

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.

like image 175
UntitledGraphic Avatar answered Oct 29 '25 19:10

UntitledGraphic