RSD Version 2.0 build 2019 carousel

User 371172 Photo


Registered User
35 posts

Hello again. I'm trying to add your component image carousel to a webpage. I added 3 pictures all the same size and it works reasonably well but with a couple of niggles:

First: I can't figure out how to change the transition and delay on each picture. The transition controls set for both the container and the pictures seem to make no difference.

Second: The picture transition has an image size jump. The picture slide in at a larger size than the static image. So once the slide transition stops the image shrinks to the static size - which make the transition 'jumpy'. Again I can't figure out if that can be altered.

Grateful for your help. I attach a wmv of the transition jump.

regards.
JP
Cat herder and Fog platter.
User 103173 Photo


VP of Software Development
0 posts

For the timer delay, I think you would have to apply the attribute data-timer-delay and for the value, set the time in milliseconds.

Reference:
http://foundation.zurb.com/sites/docs/orbit.html

For your 2nd issue, I don't see that issue here using Orbit component in RSD. Can you post a link to that video or your website?
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 122279 Photo


Senior Advisor
14,651 posts

Aren't you confusing frameworks here? If someone wants to use the Carousel, then it must be in Bootstrap, whereas Orbit belongs to Foundation...
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 103173 Photo


VP of Software Development
0 posts

Inger wrote:
Aren't you confusing frameworks here? If someone wants to use the Carousel, then it must be in Bootstrap, whereas Orbit belongs to Foundation...

Good point. ;)

Same solution. Use the attribute data-interval and for the value, set the time in milliseconds.

Reference:
http://v4-alpha.getbootstrap.com/compon … attributes
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 244626 Photo


Registered User
811 posts

On the Bootstrap Carousel you add the attribute "data-interval" as Scott referenced on the main container that has the class "carousel". The "data value" could be "500" for very fast or "10000" for slow....
Bootstrap 5 CSS Grid.
User 371172 Photo


Registered User
35 posts

That worked - thanks. So for those who need this broken down to the basics:

This applies to a Bootstrap site. The 'Data Interval' that needs adjusting is for the outer most container for the carousel There are 3 containers and they all have a class of 'carousel'. The outer has the class 'carousel' - this is the one where you need to adjust the attribute. The middle has the class 'carousel-inner' and the inner 'carousel-item'.
Under the attributes for the outer container there was an attribute called 'Data Ride' already set up. You have to 'select' the 'Data Interval' attribute from the drop down and then type in a new 'Value' in milliseconds.

Now - does anybody have a link to a resource that shows the attributes definitions and possible values?
JP
Cat herder and Fog platter.
User 10077 Photo


Senior Advisor
1,096 posts

Here's a reference for attributes:

https://www.w3schools.com/bootstrap/boo … rousel.asp
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/

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.