Responsive Content Slider Tips and...

User 103173 Photo


VP of Software Development
0 posts

Share your tricks or tips for Responsive Content Slider with others!

This thread is for tricks and tips only - please no problem questions. Have a problem or question or want to chit chat about this program then Start a new thread please.
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 232214 Photo


COO
823 posts

Please note that the first tips & trick can be found in the help guide. :P
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 303390 Photo


Registered User
91 posts

When I want some "dummy" images to use in RCS I use the Dynamic Dummy Image Generator at

https://dummyimage.com/

User 244626 Photo


Registered User
659 posts

One of my concerns using RCS was the limiting feature of the touch swipe of the slideshow. It requires the user to perform quite a long accurate swipe across the screen on a mobile device. 50 % of the screen ?

I found that if you edit the slideshow js file that is exported you can adjust the value(s) of the x y axis and the time element.

This makes a slideshow on a mobile device intuitive and responsive.

Search for var touchsurface = el,
and adjust these default settings to something smaller. Save and upload and enjoy the "tweak"
threshold = 150, //required min distance traveled to be considered swipe
restraint = 100, // maximum distance allowed at the same time in perpendicular direction
allowedTime = 300, // maximum time allowed to travel that distance
User 244626 Photo


Registered User
659 posts

Here is a trick to change the absolute position settings for elements from px to percent using some js. I have created a RCS slideshow using the picture element. Next I added a simple heading and customized the prev next controls which are put in a container. Breakpoints were added to adjust text size and the prev next controls size. The picture size was not adjusted. As we know, since the headings and controls are using the main picture as a reference point, anytime the picture begins to shrink the positions of the other elements will not follow the size adjustment since they are set using px instead of percent. I go ahead and choose absolute and uncheck top to set the px to 0 for the elements. Next I exported for embedding into RSD (or FF or BB). Once in RSD I linked a resource file main.js that has some code to find the prev next control container by ID and then change the css to top: 50% instead of top: 0 px. It then finds all the headings by classname and changes that position to top: 20 % instead of top: 0 px. Now when viewing the slideshow in RSD the headings and controls will adjust by percentage instead of px. There is some transform translate added also....
This opens up other possibilities.....like injecting Greensock ? wicked:D
Attachments:
User 244626 Photo


Registered User
659 posts

This is the RCS file for the above Fuel Injection RSD.
Attachments:
User 244626 Photo


Registered User
659 posts

Instead of embedding your Responsive Content Slider you can load it on click. The embedded html is inserted into a "emptied" div. The required main.css stylesheet is updated in the theme stylesheet. The slideshow.js script required to start and load the slideshow is initialized after "onload" of the html.

http://gluexp.coffeecup.com/bootstrap/p … adrcs.html

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.