This was a test of
Bootstrap Carousel to see if was useful for things like this. The Carousel component was installed into a blank web page using Bootstrap Studio and Bootstrap 5.2
I was disappointed in the "default" slideshow. While there are various options and settings to make it more to my liking, I had to decide what I wanted and wasn't sure it would ever meet my needs.
First on the list were captions. Could you have a page of captions (like this page) without a picture? Would the captions work best at the top, above the picture, superimposed over the picture, or below the picture? For several reasons, above the picture was my first choice and over the picture (the default) was a long third.
So, how is that accomplished? The solution was CSS and "Table Caption" for the description. To do this, the image and caption have to be in a table container then
"display: caption-table;" in CSS is used.
With that working, something had to be done with the navigation arrows. When at the first or last slide, the arrows indicated that you could go to a slide that didn't exist. As you can see on this page, which is the last, there is no right-arrow button. This took a little JavaScript (and jQuery) to fix. To make that more interesting the carousel message handler is not the same on all versions. Then, another nasty issue is that you can't use finger swipe on a Smartphone without first using an arrow. That's been fixed also by calling left arrow upon (document.ready) which isn't visible to the user.
So Carousel is still a work in progress expecially in the area of accommodating various aspect ratio images and varing amount of description. Most of these pictures are 9 x 13 which seemed to work out well.
I hope you enjoyed viewing the repair and will not be afraid of working on your own phone.