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

Move carousel arrows to caption

Explorer ,
Aug 22, 2022 Aug 22, 2022

Copy link to clipboard

Copied

How can I move Bootstrap Carousel arrows to the caption? 

Views

252

Translate

Translate

Report

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

Votes

Translate

Translate
Explorer ,
Aug 22, 2022 Aug 22, 2022

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

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

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;
}

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

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

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. 

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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/ 

Votes

Translate

Translate

Report

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

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

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

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

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

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

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

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.

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

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