Streaming live at 10am (PST)

CMS slider with pager images


#1

Been going back and forth with this all day. I'm most of the way there. But pulling the thumbnails from the CMS I am having one heck of a time with.

I seem to be able to either get thumbnails and no paging ability or paging ability and no thumbnails

here is the share link
https://preview.webflow.com/preview/graceluxuryrentals?preview=e8749e2c50ac8b93da7711a150c89c06

The pages I have tried are the stylesheet(html embed in a dynamic list) and the dynamic rentals template with cycle-slideshow using custom div attributes.

Published is here
http://graceluxuryrentals.webflow.io/rentals/the-grace-301

If you have other suggestions how this might be accomplished in webflow I'm open to different ideas. It just has to be able to grab dynamic items so clients can add images and units as needed.

thanks in advance
Jeremy



#2

Here is the solution.

in the custom div attributes instead of {{src}} using {{children.0.src}} works
because of the structure of the dynamic list there is the dynamic item between the cycle slideshow and the img files.

With cycle2 js and http://jquery.malsup.com/cycle2/demo/pager.php

Using the div attributes from the Advanced Custom Template we can build a dynamic gallery like that used in many hotel search sites.


#3

Bro, can you explain please how you did that CMS slider?
And does it possible to make it both: videos and images inside of slider? Do you know?
Thank you!


#4

Hi Ilan,

You can use pager images to select videos, I just built a new slider to test it. But using the dynamic cms you can’t alternate video and images between slides. I’m going to work on a how-to build these with cycle JS. I don’t have the ideal video capabilities right now so it will have to be a written explanation.


#5

http://cms-slider-and-cycle2js.webflow.io/

https://preview.webflow.com/preview/cms-slider-and-cycle2js?preview=fe8f3fe8373fee1a2a76d667671881fc

@Ilan_Golan here is the instructions for creating the slider.
The one you want is the add on one at the end.


#7

Thanks @jbleroux these are super useful instructions, got it working great for me