CMS slider with pager images

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


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 Cycle2 Pagers

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

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!

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.

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.

1 Like

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

1 Like

Awesome work @jbleroux, thanks for sharing!

Curious if you know of a way to implement an arrow pager to navigate the image pager thumbnails.

My intent is to display 6-8 thumbnails at a time and use a pager type solution to navigate more thumbnails. The first slide would remain until a new thumbnail is selected.

Thanks again!

Kale

Does anyone know how to stop the video from playing after you scroll to next video? For Vimeo. See this example. https://lydafire.webflow.io/lyda-work

The only way to do it would be with some javascript that pauses the video on click but no easy solution for this. I seem to think there might be something in the forums addressing this. Look under stopping videos etc.

1 Like

Yeah someone passed this over to me, looks like it might be the way to do it

1 Like