Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Move carousel arrows to caption

Explorer ,
Aug 22, 2022 Aug 22, 2022

How can I move Bootstrap Carousel arrows to the caption? 

429
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Explorer , Aug 23, 2022 Aug 23, 2022

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....

Translate
Explorer ,
Aug 22, 2022 Aug 22, 2022

... or at least to above the caption and below the image

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 22, 2022 Aug 22, 2022

Add the following style rules. Adjust the values as needed.

.carousel-control-prev, .carousel-control-next {
    top: auto;
    bottom: 50px;
}

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 23, 2022 Aug 23, 2022

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. 

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 23, 2022 Aug 23, 2022

I need to show that there are more slides, so omitting is not an option.

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 23, 2022 Aug 23, 2022
quote

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:

https://getbootstrap.com/docs/4.0/components/carousel/ 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 23, 2022 Aug 23, 2022

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

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 23, 2022 Aug 23, 2022

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....

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 23, 2022 Aug 23, 2022
quote

Wide images won't work as they are different sizes and must be uncropped.


By @mc31803971

==========

image.png

The weather just turned ugly.  Maybe a carousel slider isn't your best friend here.  Take a look at Juicebox.

https://www.juicebox.net/

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 23, 2022 Aug 23, 2022

I downloaded Juicebox but it is barely useable! I wonder if it's even supported any more. Sigh. Anyway my fix is working fine.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 23, 2022 Aug 23, 2022
LATEST

Hmmm...  Should be simple.  Did you examine the Demos and Supporting Documentation?

https://www.juicebox.net/demos/

https://www.juicebox.net/support/

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines