tutorials - Post ID 268950

User 2815606 Photo


Registered User
55 posts

Hi Jeff,
A basic video tutorial on adding the control icons would be great. I always have trouble getting them to position correctly.

Only if you get a few minutes in your busy schedule that is!

Thanks,
David
User 2846109 Photo


Ambassador
341 posts

Where do you have trouble placing them, David? Are you trying to get them under or over the slides? or ontop of them in a specific place?
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2815606 Photo


Registered User
55 posts

Hi Jeff,

It is the 'previous' and 'next' navigation chevrons < > on the left and right of the slides container...... just can't seem to get them to center vertically, or indeed even show up sometimes. Just can't see where I keep going wrong :)

David
User 244626 Photo


Registered User
811 posts

Me too ! I spend more time on that than anything. It would be nice to have percentage adjustments instead of px for the postion settings. Then it might follow the shrinking container which causes the controls to go whack.
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

Twinstream wrote:
Me too ! I spend more time on that than anything. It would be nice to have percentage adjustments instead of px for the postion settings. Then it might follow the shrinking container which causes the controls to go whack.


I really hope we can get the unit switcher in RCS eventually.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 304640 Photo


Registered User
24 posts

I spent a lot of time fussing with RCS and got tired of the hit-or-miss functionality. Bought CSS Slider, an all HTML program that is not as slick looking as RCS, and requires annual renewal, but I could at least get it to function within RSD.
User 2846109 Photo


Ambassador
341 posts

David Dashwood wrote:
Hi Jeff,

It is the 'previous' and 'next' navigation chevrons < > on the left and right of the slides container...... just can't seem to get them to center vertically, or indeed even show up sometimes. Just can't see where I keep going wrong :)

David


I think if you have the slide height freely adjust as the window gets wider it will be hard to get the previous/next arrows to be centered all the time until we get the unit switcher in RCS. But if you have the slide height static for each breakpoint you can then set them to be centered.

Another option would be to have the arrows at the top or bottom of the slide so you don't need to center them. Then it would work at any height. This has been my solution so far anyway.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 244626 Photo


Registered User
811 posts

Jeff wrote:
David Dashwood wrote:
Hi Jeff,

It is the 'previous' and 'next' navigation chevrons < > on the left and right of the slides container...... just can't seem to get them to center vertically, or indeed even show up sometimes. Just can't see where I keep going wrong :)

David


I think if you have the slide height freely adjust as the window gets wider it will be hard to get the previous/next arrows to be centered all the time until we get the unit switcher in RCS. But if you have the slide height static for each breakpoint you can then set them to be centered.

Another option would be to have the arrows at the top or bottom of the slide so you don't need to center them. Then it would work at any height. This has been my solution so far anyway.


So I was thinking that if we do not have the 50 % centering control.....could I just edit it after the export. Yup.

In the main.css file locate the container that holds that previous and next controls and where it says "top: 0" put "top: 50%"
Save and reload the html file and it centers the controls. (If we have a CSS guru on the forum maybe they can fine tune or explain why this works ?"
Attachments:
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

You've just done with code what we could do if we had the unit switcher in RCS. It's a good option but I just don't like having to edit the code after export as every change will require it as well. But that is the power of being able to adjust the code on your own.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 244626 Photo


Registered User
811 posts

I would amend the change in code for centering the controls to this:

top: 50%;
-ms-transform: translate(0%, -50%);
transform: translate(0%, -50%);

seems to account for the container positioning better ?
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.