Hello!
I have just implemented the Carousel component from React Bootstrap as a Streamlit component.
Hope this will be helpful to others!
6 Likes
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!
2 Likes
Great component @ThomasBouamoud! Thanks for sharing!
Charly
1 Like
Could you implement such an animation?
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?
1 Like
I found some JS based carousels(i like the first link):
- https://webartdevelopers.com/blog/carousel-4/
- 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.
1 Like
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:
Thanks for the feedback! I’ll take a look at that shortly
Thanks, Thomas! Also, is there a way to have the carousel function return the index of the image that is currently being displayed?
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!
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?
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
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.
1 Like
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?
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
2 Likes
great component thankyou! but i don’t understand how the link work, i use the example code but when i click the image it didn’t direct to the url, is it a bug or thats not how it work?
Hi @hanif_rizkyana, if the example does not work for you, please open an issue in GitHub with all the required details for me to reproduce. Did you make sure to update to the latest version of the package? Maybe try from a new virtual environment
I am not able to open an issue on the github link.
I was wondering if it’s possible to change text color for the slides. I have some images with dark colors and the text just blends into the image
Hi @Nikhil_Talreja , GitHub issues should be fine now, thanks for highlithing this.
It is not currently possible to change the text color for the slides, I will make a note of it for the next release. Having said that, it should be relatively easy to achieve that with some custom css for now.
Do you know how I can add custom CSS to your component? I tried a few things but they seem not to work.