Greetings!
I’ve recently stumbled upon a Webflow limitation that took me by surprise. I know it’s already been mentioned in previous posts. However, I was unable to find any native workarounds.
The problem
You can’t manipulate dynamically linked content inside CMS templates. In other words, if you have referenced objects inside objects, all you can do with them is list - no sorting, filtering or pagination. Hence, you can’t easily create dynamic sliders inside CMS templates.
Solution - how to create a dynamic slider from multi-referenced content
Check out the slider on this page - the content of each slide is a CMS item. When you click on each slide - a lightbox modal appears with additional content.
- What you need:
- ANY JavaScript slider plugin. I used Flickity - https://flickity.metafizzy.co/, but you can use any other slider
- A bit of JQuery knowledge (to implement the modals )
- Implementation:
a) Setup your CMS structure. Let’s say each item from collection A has a Multi-reference to a bunch of items from collection B. (1A includes many Bs)
In the example (it’s a travel site in progress, in Russian) - you’re looking at a page for a Tour, that is linked to items from Days. Each Tour has multiple individual Days associated with it.
b) Create your template for an individual collection Tour item. Insert your list of linked items from Days and style them. Note that each box will become a slide.
This is how a Tour template page looks with Days inside.
Here’s how the Day box structure is setup. (Disregard the poor naming, I’m still very actively working on it, and this is just a proof of concept).
You can see the dynamically linked items highlighted in different color.
There are two main components inside each Day:
.days-collection-thumb-wrap - which is the box (slide) you see
.days-collection-lightbox-wrap - the modal window that will popup when clicked on each slide. This modal window is not hidden, simply transparent, and the z-index is 0.
There’s also a read-more button that triggers the modal lightbox.
c) Publish your site.
d) Turn your Days collection into a slider after page load :
Put this custom code in your site’s footer and publish again.
.flickity-viewport { width:100%; } $(function() { $('.collection-list-3').flickity({ // slider options contain: true, wrapAround: true });
This will load Flickety plugin (again, use any other slider you wish) and apply it to the ‘.collection-list-3’ class, which is where our Days collection lives inside the Tour page.
e) Now view the page you published and see if it works. Your list of Days should now be a slider. You can play with slider options, depending on what third-party solution you use. You may need to adjust the styling on individual Day boxes to make them as wide and tall as you want.
f) To implement the modal was a bit trickier. Simply using an interaction to hide/show the modal class didn’t work for me and this particular slider package. I couldn’t get the modal to expand to full height as it was inside the slider’s container which had position:relative and overflow:hidden.
To do this properly the modal window needs to be moved inside the DOM after each click.
Here’s some simple JQuery that shows and hides each slide’s modal window:
`
$('.read-more-btn').click(function(e){
e.preventDefault();
var thumb=$(this).parent(); //the modal's thumbnail container
var lightbox=thumb.next(); //the modal
var thumb_parent=thumb.parent(); //the parent of parent
lightbox.prependTo('body'); //move the modal to the top of the DOM
lightbox.animate({'opacity':'1'},300); //show the modal
lightbox.css({'z-index':'999'}); //ensure the modal is on top of other content
lightbox.click(function(){ //bind a click even to close it
$(this).animate({'opacity':'0'},300);
lightbox.appendTo(thumb_parent); //move back to parent
$(this).css({'z-index':'0'}); //send to back
$('body').css({'overflow-y':'auto'}); //enable scroll on body
});
$('body').css({'overflow':'hidden'}); //disable scroll on body
});`
When you click on a magnifying glass button on each slide, the following happens:
- find the associated modal inside the same slide (that was set to 0 opacity)
- move the modal to top of the DOM so that it’s before everything else
- animate the modal’s opacity to 100%
- attach a click even to this modal and not only hide it, but also move it back to the corresponding container after disappearing.
- ensure body doesn’t scroll while the modal is open
I’m still actively working on this, but I hope this solution helps someone.
