Here is the showcase site. @gurigurico The project is now clonable
Always
Jer
Hi my friend. I’ve tried to implement the slider on my website but I’m trying to create a slideshow with more than just 1 image at a time. It looks great in the Designer mode but in the published website It’s not working (it just showing 1 image at the time).
See the Logos right before the footer:
And also the images are not fitting properly inside the CMS items. Do you have any idea about what I’m doing wrong? I’d be pleased if you can help me 
Here’s the published site:
http://interfy-io.webflow.io/
And the Sharable:
https://preview.webflow.com/preview/interfy-io?preview=9c935d038fc034909fc576c499518f7e
Hi my friend. I’m trying to use Slick because I need a CMS Slideshow with multiples slides “per page”. I’m following the guide but I just don’t know how to “Move the /slick folder into my Webflow project”. How can I do that? Can you help me?
Here’s the published website. The slideshow is before the footer (there are 2 because the first I was trying to make with the other script but I think it just work with 1 slide per page).
I don’t think it’s possible to do more than one at a time with cycle2 is. There is a newer jquery library that might be able to do this it is listed in another custom slider. Cycle2 pulls each image separately on its own. I’ve only used it on single images and divs
@gurigurico @Sebasgaes @Sprackhaus @Cameron1 @RoseWebStudio
Merry Christmas, Here is an update to the cycle 2 js with instructions on how to create each of the slider examples on the site. Once you understand the principals behind the base slider the rest should make sense. I’m not in a position to make a video at this time but I hope you will be able to follow the steps to create your own custom cms sliders
https://preview.webflow.com/preview/cms-slider-and-cycle2js?preview=fe8f3fe8373fee1a2a76d667671881fc
http://cms-slider-and-cycle2js.webflow.io/
if you need help with anything let me know
always
Jeremy
The slick slider is also a very cool workaround and I built a slider in there. I have not had a chance to do a walkthrough of how to build it yet. You can see that post at the end of this thread. Cyberdave gives a good intro.
2 Likes
Had a thought, if it’s like cycle2js you need the js file. The css is just a styling for the slider itself. You could download the min js file and host it somewhere like Amazon web servers. If the js file is small enough you can paste the script into webflow. Has to be under a character limit.
I’ll have to take a look at that slider. I’ve been using cycle js but slick looks like a great alternative.
here is the slick slider in action it can easily make use of CMS collections. I used the combination of collection and the cms lightbox trick.
If you want a good understanding of how it can work. Check out @cyberdave 's https://webflow.com/website/Auto-Height-Slider-Example-using-Slick
If you use the custom code libraries he uses it will initialize. Then it is just a matter of using the slick slider features you want to use.
http://truereflectionmedia-sandbox.webflow.io/
let me know if you have any questions. I’d be happy to help you if I can. I only played with the most basic slider functions. The basic function is whatever divs are nested under you slider will act as the slides. This really opens up a ton of possibilities.
always
jeremy
Hey Jeremy,
It’s working perfectly dude. Thank you a lot. I’m playing with the script right now but it seems to work 100%.
1 Like
Hi Jeremy, many thanks for this solution it is most useful, do you or anyone else know a method to align captions to the left or right edges of the image which is center aligned within the slider ‘slide’ container when the images have different aspect ratios? I’ve been trying to find out the best method to achieve having captions aligned to the left or right edges of the image that is being loaded into a slide container of fixed height so the width of the image is variable depending on it’s aspect ratio.
I don’t know much code at all but I’d imagine it is a matter of calculating the excess whitespace of the slide container and returning these values to the div containing the captions to be used as margin or padding values?
Unless this is already achievable using Cycle2 functions?
Also if anyone knows what script would allow keyboard navigation of the slides it would be very useful, there is something for this on github but it does not work for me even when including what appears to be a missing semi-colon in the markup of the solution i found for doing this.
Cheers,
Sam
Sam, are you talking about on the slider or in the lightbox? The lightbox is webflow’s standard one so you’d be restricted to the formatting of that unless you create a custom lightbox from scratch whioch I believe has been done with interactions in the forum somewhere. For the slides themselves it’s just positioning.
Hi Jeremy, no it is not a lightbox, it is a slider/slideshow using Cycle2.
CSS positioning won’t work as there is no way for the DOM to know what the width of the images are when constrained to the fit the height of the slide container.
I need a straight forward and efficient method to pass the excess (or not) of white space either side of the image to a caption taken from the CMS to use as an offset value for left or right padding/margin values for the caption so that they align precisely to either left or right edge of the image within the slide container, this needs to be irrespective of the aspect ratio of the image.
Ideally I’m looking for a way that the images or background images (if using a CSS solution with background-image) can be treated as both structure and content, Flash/actionscript had this covered with MovieClips. I’m assuming that Jquery and other Javascript libraries can do this now?
Cheers,
Sam
I did this one a while ago and the captions we constrained by the image size.
Not sure if this is what you were talking about.
let me know if this is it and I can share the webflow site. It’s been a while since I did it. I was trying to create the shangeable border size based on the img sizing.
Hi Jeremy, here’s a link that shows what I mean, I’d like to be able to align the captions to the left edge of the image in the slider in this example, (justified to each image not the slider container), I’m assuming any way to do it will also make it easy to align to the right side of the image also.
Here’s the same thing published: http://align-cms-slider-captions.webflow.io/
Cheers,
Sam
Wouldn’t the easiest be to create a div for the image? The div can change it’s size based on that of the image in it?
https://preview.webflow.com/preview/onetriptwovoices?preview=bbbafaec97ca2824e3a9b456412387aa
which is what I did with this. The overlay i think is also being constrained with padding
are all of your images going to be different sizes?
not sure if this helps or not
Jeremy
Yes all images will be different aspect ratios
So are you looking to use the CMS? Or not. If not you can build out the structure for the Div’s individually however you like. SO the overlay is placed on the individual images where makes the most sense. THe cycle2 js basically takes a list and makes each list item a slide. With dynamic content and CMS the structure of that div repeats exactly the same. But static content does’t need to although. Then you could just use the webflow slider. Again I really don’t know if I’m answering the question. But you should be able to position your overlay using positioning overtop of the images and have it’s placement be relatively identical regardless of the image orientation or size. Either it is an exact overlay size or use % to match the overlay to the image.
It is a caption (i.e. outside of the image) not an overlay, and from the CMS alongside each image.
Ok I get what you are asking. My easiest solution would be to put the caption in the div set it to position absolute. Bottom. So that should line it up to the bottom of your slide bg image div. I can’t see the published result of doing this but in theory that should work
That won’t make any difference to aligning it to the edges of the image? I need it position relative to the left edge of the dynamic image not the container in this example.
This was a simple thing in actionscript 10 years ago, it must be very easy to do with HTML/CSS/JS?