Ability to not add padding to the first and last element with offset

Is your feature request related to a problem? Please describe. When making use of the offset property for a Carousel it would be useful to not apply the offsets to the left of the first element and to the right of the last element so the sizing/flow is in line with the rest of the page flow

Describe the solution you’d like A boolean flag that allows you to toggle the spacing on or off

Describe alternatives you’ve considered I have tried to selectively apply the spacing to the elements using padding/margin but this changes the space taken by the element and messes with the aspect ratios. It is possible to do this using the negative spacing on the container but it would be useful to not have to do this and retain all the logic in the carousel itself

Additional context None

[piotr-s-brainhub]

Thanks @nabeelvalley

this example is very useful.

[nabeelvalley]

@piotr-s-brainhub Here’s some code which shows the extra space on the left and right side (current behaviour)

<div style={{backgroundColor: "green"}}>
<p>
  Normal Page Flow. Here you can see that the content of the slider does not span the full width of 
  the section it's placed in due to the added spacing on the left and right of the first and last
  slide respectvely. It would be useful to be able to specify that spacing not be added to these elements
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat ante eget elit euismod 
  facilisis vel quis sapien. Donec mi lorem, interdum rhoncus fringilla a, lacinia at massa.
</p>
<Carousel
  slidesPerPage={2}
  infinite
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>
</div>

This is from the documentation with the above code:

I’m suggesting to instead, using a configuration option, get something like this which is done using negative margins on the container, but this isn’t really a usable solution as it alters the size and spacing of the elements. A similar issue happens when applying the spacing to the children directly

The other issue I mentioned above is when applying padding to the children so they can be spaced correctly but this doesn’t really work well as there’s no easy way to how much spacing the child should have and this causes the children to become different sizes