Question

191

How can I center items in Slick Carousel?

rated 0 times [ 193] [ 2] / answers: 1 / hits: 20742 / 9 Years ago, wed, october 14, 2015, 12:00:00

I'm using the Slick Carousel, but there's one layout itch I can't scratch. When I have fewer items than the carousel can display at once, they're left-justified. I'd like them to be centered. For example, with slidesToShow equal 3 and only 2 items, I get

-------------------

 IIIII IIIII

-------------------

when what I want is

-------------------

    IIIII IIIII

-------------------

or if there's only 1 item:

-------------------

       IIIII

-------------------

I've tried setting centerMode, but that's a completely different effect.

Is there a way to get the effect I want? It needs to handle slidesToShow being reduced by responsive breakpoints.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lucianod

Add To Favorites

Follow

Total Points: 667

Total Questions: 106

Total Answers: 92

Location: Jordan

Member since Thu, Aug 5, 2021

3 Years ago

lucianod questions

1 Angular Material MatToolTip show up only when the element is truncated

Tue, Feb 9, 21, 00:00, 3 Years ago

1 How to catch server errors in Nuxt.js so it doesn't crash page render? (Vue)

Wed, Feb 3, 21, 00:00, 3 Years ago

1 How to use window.postmessage to communicate with parent window

Thu, Aug 6, 20, 00:00, 4 Years ago

1 ESM import on webpackConfig

Sat, Jul 25, 20, 00:00, 4 Years ago

1 Snackbar Vuetify - override method after timeout

Tue, Oct 30, 18, 00:00, 6 Years ago

View All

answered 9 Years ago saiget · Accepted Answer

A quick inspection of the carousel's DOM shows that the items are put in an element with the class slick-track. It is possible to center the items by modifying the margins of that element:

.slick-track {

    margin:auto;

}

Demo in this JSFiddle.

Note that the carousel in the demo sometimes stops working correctly when being resized while the last item is active but that happens regardless of this CSS modification.