Connecting multi-image field to slider on CMS template page

Community resources Webflow Tips
1

Hi everyone,

I had a project recently where we needed the ability to connect a multi-image field like this:

image
image968×270 107 KB

To a slider on a CMS template page like this:

image
image940×600 208 KB

As far as I can tell Webflow does not support this natively, so I wrote a custom script to do it. I have made a demo site showing how I did this here and you can clone the project here.

If you clone this and use it for yourself there are a few things to note:

  • The custom code lives at the CMS page level in here:

    image
    image893×611 24.8 KB

  • The script references data-tags on various elements that look like this:
    image

Current limitations:

  • I did not code an option for infinite scroll.
  • The animation is hard coded to be transform 500ms ease 0s as this is the Webflow default. I can’t read it on the fly from the page so at this stage you are stuck with whatever you hard code in the script.

Script (for anyone who can’t see it after they clone the project)

<script>
    window.onload = () => {
        const images = [...document.querySelectorAll('[data-cms="image"]')].map(el => el.style.backgroundImage);

        if (images.length !== 0) {
            let slides = [...document.querySelectorAll('[data-cms="slide"]')];
            const leftArrow = document.querySelector('[data-cms="left-arrow"]');
            const rightArrow = document.querySelector('[data-cms="right-arrow"]');

            if (images.length <= 1) {
                [leftArrow, rightArrow].forEach(el => el.style.display = 'none');
            }

            images.forEach((image, i) => slides[i].style.backgroundImage = image);

            const parent = slides[0].parentElement;
            slides.forEach((slide, i) => {
                if (i >= images.length) {
                    parent.removeChild(slide);
                }
                slide.style.transition = 'transform 500ms ease 0s';
            });

            slides = [...document.querySelectorAll('[data-cms="slide"]')];

            const parentWidth = parent.offsetWidth;
            const maxX = (parentWidth * (slides.length)) * -1;

            let currentX = 0;

            [leftArrow, rightArrow].forEach((arrow, i) => {
                $(arrow).off();
                const direction = i === 0 ? 'left' : 'right';
                arrow.addEventListener('click', () => {
                    if (direction === 'left') {
                        if (currentX === 0) {
                            currentX = maxX + parentWidth;
                        } else {
                            currentX = currentX + parentWidth;
                        }
                    } else {
                        let newX = currentX - parentWidth;
                        if (newX === maxX) {
                            newX = 0;
                        }
                        currentX = newX;
                    }
                    slides.forEach(slide => slide.style.transform = `translateX(${currentX}px)`);
                });
            });

            document.querySelector('[data-cms="slider"]').style.opacity = 1;
        }
    };
</script>
13 Likes
2

Just dropping by to say this saved me hours of coding. Thanks for sharing!

2 Likes
3

Thanks, glad it helped!

4

Hey there @jasondark Thank you so much for this, but the script is missing from your demo site, please can you add the scrip back in or past it here pretty please? Much appreciated

5

Hi, not sure why you can’t see it, it’s still there:

image
image1679×970 254 KB

7

Hi @jasondark, thank you so much for adding this! Very helpful.

I’ve added everything as described, custom code, elements and all. It seems everything executes except the only thing I can get the slider to do is have a grey box slide back and forth with no images.

Page is here: https://good-things-coming.webflow.io/product/very-cherry-jellies
pass: gtc2020

Any ideas? Thank you!

8

image
image797×111 4.93 KB

I would say that it’s most likely because of this, maybe the script was copy and pasted wrong?

9

How odd @jasondark - I’m not seeing any Syntax Errors on my end.

slider
slider1173×154 46.2 KB

It does look like the script is executing somewhat, but it seems the images aren’t being placed correctly into the slider - just grey boxes. Idk, that’s my best guess.

Any other ideas? So close!

10

Hi @jasondark the before body tag isn’t showing in the clone for me either.

Any chance you could paste here?

Cheers

11

Hey @jasondark , ditto on the no before body tag within the clone. I’m pasting from Viewing page Source.

I’m still not seeing it work after pasting however. My console isn’t showing any error but still only getting three grey boxes. What is notable is that there are 3 pictures in the ‘More Images’ field of the CMS, so the script is executing that piece, the phots just aren’t appearing where the grey boxes are. Have tried everything.

Thanks again for your help, hate being a pest - but would love to utilize what you’re sharing here, WebFlow needs to catch up!

12

Hey yes have edited my original post.

1 Like
13

Thanks for letting me know, I have edited my original post to include the script.

It’s not feasible for me to troubleshoot everyone’s custom code issues. What I would say is that this script relies on the data attributes being set correctly on the Webflow elements. So double check that;

  1. Your slider has all the data attributes set (they look like this in the script [data-cms="image"])
  2. Somewhere on your page, there exists the hidden CMS collection with your CMS images, each with the correct data attribute set.
1 Like
14

@jasondark Doh! Sorry for the run-around, just figured out I stupidly didn’t have my collections linked. it work great. Thank you again Jason!

15

hey Jason - this is amazing but im struggling to change the animation to a cross fade between slides.

i notice you say your’s is hard coded to transform with webflows defaults how would you go about changing this to a cross fade in the code?

best

jake

16

@jasondark This is amazing! It’s saved me so much hassle.

I thought I would flag a bug when using this script incase someone else comes across a solution (as I’m not that confident with JavaScript). The slider seems to cycle through all the slides with bg images and for some reason when the slider gets to the last slide with a bg image the slider continues to cycle through the slides without bg images. If you click on the right arrow it will return to the first slide with a bg image.

Hope that makes sense and again thank you for writing the this script.

17

This is great thank you!

Just one question - I’m using it for e-commerce products, when selecting a different option of a product (for example a different colour) it doesn’t find the matching images. I can’t think of a way I can connect product variations. Do you know a fix for this?

18

I’m having the same problem. Can’t figure out how to get the other CMS Slider solutions to work for this either.

19

Hey, is there any chance of making this script available for a nested collection ?
Im struggling to make a slider of each individual collection item.

Anyone know a solution ?

20

@jasondark This is awesome!

I got this to work but am not sure where I would go about changing the background image to cover the slide container (scale to fit the parent). Would you know if this is something I could fix in the CSS?

Edit: Was actually able to fix in the normal slider settings! I didn’t realize it would still adopt the bg image settings even through it wasn’t pulling the image from there.

21

Hi @jasondark,
Thanks for setting this up your code works perfect. Howerer I stumble up on 1 thing. the amount of slider to display is not being handled correct correctly on Chrome but it does on safari.

Example: https://lanssens.webflow.io/materiaal/solid-color
Open the above in safari and chrome. In safari you will see there are only 5 slides (because 5 items in the CMS) in chrome however are all slides shown.

Do you know a work-around for this?

Thanks in advance.