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

[nabeelvalley]

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]

@nabeelvalley

Thanks for this proposal but I cannot understand it clearly.

Could you paste an example code (applicable in the clickable docs if possible), some screenshots and more precisely describe the wanted behavior (with some pictures if possible)?

[nabeelvalley]

Hi @piotr-s-brainhub , let me know if this makes more sense:

[piotr-s-brainhub]

@nabeelvalley

Thanks. Could you also paste some example code?

[nabeelvalley]

@piotr-s-brainhub code for reproducing the issue or for a potential solution?

[piotr-s-brainhub]

@nabeelvalley code for reproduction

[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

[piotr-s-brainhub]

Thanks @nabeelvalley

this example is very useful.