New Component: React Bootstrap Carousel

[ThomasBouamoud]

Hello!
I have just implemented the Carousel component from React Bootstrap as a Streamlit component.
Hope this will be helpful to others!

Pypi
GitHub

[tonykip]

Hi @ThomasBouamoud,

Thanks for sharing!

I recommend you build a demo Streamlit app and deploy it to Community Cloud and share it here so the community can see how it works.

Great job!

[Charly_Wargnier]

Great component @ThomasBouamoud! Thanks for sharing!

Charly

[DioBrando]

Could you implement such an animation?

[ThomasBouamoud]

I could give it a go. Did you take that GIF from a JS-based solution? If so, can you please share a link to the corresponding framework?

[DioBrando]

I found some JS based carousels(i like the first link):

1. https://webartdevelopers.com/blog/carousel-4/
2. https://webartdevelopers.com/blog/3d-carousel-slider-vanilla-js/

Or only with CSS:
3. CSS Carousel by Edmundo Santos on Dribbble

I want to put an image with a “hyperlink” which redirect to a streamlit page inside the project.

[Xarbenence]

Hi, Thomas,

I saw that you mentioned above you made the Carousel component from React Bootstrap. I have been trying to use the feature, but what I find is that when I feed portrait images to the carousel function, the result is far too wide, and the images get heavily cut off unless I specify a certain amount of pixels ( in which case they extend off the page and I need to scroll to see them completely).

Is there a way to feed the carousel function portrait images and have their aspect ratio maintained while also remaining centered in the middle of the webpage?

This is what I see by default:

This is what I see when I increase the height to 900 pixels:

If I decrease the width, the whole image fits, but it shifts to the left and is no longer centered:

[ThomasBouamoud]

Thanks for the feedback! I’ll take a look at that shortly

[Xarbenence]

Thanks, Thomas! Also, is there a way to have the carousel function return the index of the image that is currently being displayed?

[ferxo]

Hello, I was wondering, how can I add links to the images or make them execute an action on click or other events?
Thanks in advance!

[ThomasBouamoud]

Hi @Xarbenence, I have implemented an update that should do the trick for the sizing/centering point you raised. I’m hoping to publish the updated version of the package by the end of the week. I will post an update here.
Regarding your other point (getting the current index), this is trickier to implement but I will try to come up with something soon.

Hi @ferxo, I could implement the possibility to pass links to images within the carousel. Clicking on them would then open that link in a new page. Is that something you would find useful?
However, triggering actions/workflows based on a click within the carousel is a more complicated topic. Do you have a use case to share?

[ferxo]

Hi, sorry for the late reply!
Yes, I’d find quite useful as I just want to display the carousel and after the user clicks, it displays the selected page.
Thanks in advance

[LucasC]

Hi, Thomas,

A fantastic component that helps me a lot.

The same problem happens to me like @Xarbenence does.
I’m wondering if it’s feasible to incorporate automatic image scaling to adjust the component’s height dynamically. For instance, I have two images sized 1024720 and 720 1024. When I set the height to 720, the second image gets cropped to 720*720. However, if I set the height to 1024, the first image leaves the component with 1024-720=304 blank space.

[LucasC]

One more question is that can I set the height of the component to a certain percentage of the container’s height instead of a fixed value?

[ThomasBouamoud]

Hi All, I have just published version 1.0.0. Here are the updates:

• bug fix with interval argument
• match carousel theme to Streamlit theme
• users can add links to items @ferxo
• ‘width’ argument will now control the width of the carousel while preserving the image proportions & carousel is always centered @LucasC + @Xarbenence
• cleaned up console warnings and errors

[ferxo]

Hey, many thanks, this works like a charm!
I’m having trouble with the length of the container and the title.
I believe that if an image is too large it will cut the image and won’t show the title.
I haven’t figured yet, but i believe it resizes after you resize the page and shows the full length of the image and the title

Default image:

After page resize:

BTW I used this to show the carousel:
carousel(items=test_items, width=1, height=400)
Thanks in advance!