CODEWITHSUNDEEP
javascriptglidejs
Baskent Mobil
Baskent Mobil

Reputation: 41

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>

Upvotes: 4

Views: 1571

Answers (2)

Tanzeel Saleem
Tanzeel Saleem

Reputation: 950

.glide * {
  margin: 0 auto;
}

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

Upvotes: 0

UntitledGraphic
UntitledGraphic

Reputation: 1274

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.

Upvotes: 1

Related Questions