different image-width

[sashimigud]

Hello, let me begin with saying that I've researched a lot of carousel-libraries, and this seems to be one of, if not the greatest library I've come across, thank you for creating it!

In my project I try to showcase some images, the images will come from backend with some properties, in particular I have an orientation-prop that tells me whether or not the selected image is a landscape or a portrait image (landscape has higher width than height, and portrait has a lower width than height), and I'm struggling to find the right approach.

In the docs it says that the carousel will fill the wrapper-size, so my first thought was to change the wrapper width according to the active items orientation-prop, if it's a landscape-image I'll set the width to lets say 500px, and if it's a portrait image I'll set the width to lets say 200px. But to do this I need to get the active item, it seems less optimal to iterate over the items and use "getIsActiveItem" on each item, is there a way to get the current active item?

or is there a better approach to differently oriented images (or images of different heights/widths) that doesn't stretch out the portrait image, that I haven't thought of?

In any case, thank you for this amazing library

Regards, sashimigud

[Emiliano-Bucci]

@sashimigud Hi! First of all thanks a lot for your feedback, i really appreciate it! :) Regarding your issue, did you try to use the useListenToCustomEvent hook?

Quick example:

function MyComponent() {
  const [imageOrientation, setImageOrientation] = useState('landscape')
  const images = [
    {
      src: '/',
      orientation: 'landscape',
    },
  ]
  const { carouselFragment, useListenToCustomEvent } = useSpringCarousel({
    items: // items...
  })

  useListenToCustomEvent(event => {
    if (event.eventName === 'onSlideStartChange') {
      const activeImage = images[event.nextItem]
      setImageOrientation(activeImage.orientation)
    }
  })

  return (
    <div
      style={imageOrientation === 'landscape' ? { width: '500px', height: '200px' } : { width: '300px', height: '500px' }}
    >
      {carouselFragment}
    </div>
  )
}

Let me know if this can help and if i correctly understood your issue :)

[ankitprahladsoni]

What if the height of each Carousel Fragment is dynamic? Currently, the wrapper's height would be the same as that of the longest child. And rest of the small children would have unnecessary space below them.

[Emiliano-Bucci]

@ankitprahladsoni Mine was just an example of how he could handle/solve his issue :)

[sashimigud]

Thank you so much for this solution! My project is a side project, so I don't get to work on it a lot. That's why it took so long getting back you! But I tried out your solution, it worked really great! I greatly appreciate both your reply and your work on this library!

Best regards!