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.

Please note that the first tips & trick can be found in the help guide.

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

https://dummyimage.com/

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

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

This is the RCS file for the above Fuel Injection RSD.

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

I can't find how to add control buttons and make them work.

Hi Phillip,
Click on the Elements tab.
Lower right side are the control buttons.

I figured out how to apply alpha transparency in the color selector finally. If you notice, there is a number 1 in the setting for the transparency. Trying to type in .65 does not work over the 1. You have to first type 1.00 and then highlight the 1 only and delete leaving just the .00

Now you can type in the alpha over the 00 part leaving the decimal alone. So I guess thats a tip unless I was missing some other quick method ?