如何将物品放在Slick Carousel中？

Question

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.

Answer 1

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.

Answer 2

Putting margin:0 auto; on the <img> tag worked for me.

Eg,

<div class="items">
    <div>
        <img src="https://via.placeholder.com/25x50" />
    </div>
    <div>
        <img src="https://via.placeholder.com/25x50" />
    </div>
    <div>
        <img src="https://via.placeholder.com/25x50" />
    </div>
<div>

CSS

.items { background:red; }
.items img { margin:0 auto; }

https://jsfiddle.net/cegor9j2/