0

I am trying to find a way to vertically center or otherwise add space to my react-slick slider so that I can show a box-shadow when slides are hovered over. Currently it seems the height is being automatically calculated and the slick-list wrapper has an inline style of the calculated height of the slides.

Is there any way for me to override or otherwise get around the inline height or overflow:hidden on slick-list being set so I can show my box shadow?

current (box shadow turned red for better visibility): Screenshot of cut off box shadow

desired would be something closer to this, where you can see the bottom of the drop shadow. I got this by manually editing the height in my browser: enter image description here

caraclarke
  • 370
  • 1
  • 5
  • 24

1 Answers1

0

I'm not sure I understood the question, but are you not able to add some padding to each slide? Also try setting the height you want for .slick-list, make your slides have height: 100%; and then they should all have the height of the parent (.slick-list).

If you want to center the slides within the parent, make the parent a display: flex; and add align-content: center;

If that's not what you're looking for, post screenshots and the code you have.

anacampesan
  • 105
  • 10
  • Added photos and updated my question for hopefully better clarity – caraclarke Sep 05 '19 at 15:52
  • I'm currently using react-slick in a project and setting a fixed height for the slides causes .slick-slider to have the height of the longest slide. If not, try adding some margin-bottom to your slides, it should also do the trick. – anacampesan Sep 05 '19 at 15:59
  • margin-bottom didn't make any space between the slide container and the slides but I used relative position on `.slick-track` and that helped, the box-shadow is still slightly cut off but its working better than before – caraclarke Sep 05 '19 at 17:42