Copy link to clipboard
Copied
How can I move Bootstrap Carousel arrows to the caption?
Wide images won't work as they are different sizes and must be uncropped.
Tentative success report: I removed the word "carousel" from controls and put the controls in a div inside the indicator ol class. Still testing....
Copy link to clipboard
Copied
... or at least to above the caption and below the image
Copy link to clipboard
Copied
Add the following style rules. Adjust the values as needed.
.carousel-control-prev, .carousel-control-next {
top: auto;
bottom: 50px;
}
Copy link to clipboard
Copied
Moving controls won't work right on all devices. Are you certain you want to do this? Maybe omitting carousel-controls would be a better option.
Copy link to clipboard
Copied
I need to show that there are more slides, so omitting is not an option.
Copy link to clipboard
Copied
I need to show that there are more slides, so omitting is not an option.
By @mc31803971
Just use the pagers (indicators) rather than the arrows to show that there are more slides. I cant see why the arrows wont work on all devices but then again I dont use Bootstrap.
Scroll down to the indicators section:
Copy link to clipboard
Copied
Depends on image size. On larger devices, the arrows may disappear from view.
One option is to use very wide carousel images that are 100% width & height. Or as you say, just use the default pagers without arrows.
Always test on multiple browsers & devices.
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel
Copy link to clipboard
Copied
Wide images won't work as they are different sizes and must be uncropped.
Tentative success report: I removed the word "carousel" from controls and put the controls in a div inside the indicator ol class. Still testing....
Copy link to clipboard
Copied
Wide images won't work as they are different sizes and must be uncropped.
By @mc31803971
==========
The weather just turned ugly. Maybe a carousel slider isn't your best friend here. Take a look at Juicebox.
Copy link to clipboard
Copied
I downloaded Juicebox but it is barely useable! I wonder if it's even supported any more. Sigh. Anyway my fix is working fine.
Copy link to clipboard
Copied
Hmmm... Should be simple. Did you examine the Demos and Supporting Documentation?
https://www.juicebox.net/demos/
https://www.juicebox.net/support/