Min Yoongi
Min Yoongi

Reputation: 466

How to align arrow icons and slider dots horizontally in straight line?

I'm using react-slick to create an image slider with captions with following prototype.desired output The only problem is I need to display text for corresponding image below the default dots position, hence I'm trying to create custom dots and arrows with onClick functions. How can I align them in center and in one row provided number of dots will be dynamic.

Upvotes: 0

Views: 1097

Answers (1)

polisen
polisen

Reputation: 327

Here's how I would do it:

   #dotsContainer {
    width: 100%;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    }

This would align everything put in that div in the center - but does not really prevent it from breaking if there are so many dots.

Upvotes: 1

Related Questions