Example of centered slider with partially-visible next and previous

[RyanPaiva56]

For anyone looking to do a full screen, responsive slider, here's my code that accomplished this:

Add the class to your slider:

<Slider className="centeredCarousel">

Here's the class using Tailwind's breakpoints:

.centeredCarousel {
  padding-left: 7%;
  padding-right: 7%;

  @media (min-width: 640px) {
    padding-left: 14%;
    padding-right: 14%;
  }

  @media (min-width: 768px) {
    padding-left: 18%;
    padding-right: 18%;
  }

  @media (min-width: 1024px) {
    padding-left: 22%;
    padding-right: 22%;
  }

  @media (min-width: 1280px) {
    padding-left: 26%;
    padding-right: 26%;
  }

  @media (min-width: 1536px) {
    padding-left: 30%;
    padding-right: 30%;
  }
}