Connecting multi-image field to slider on CMS template page

[Joyce_Kettering]

@jasondark

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

This is great, thank you Jason!

[martijnrunia (Martijn)]

@jasondark
Second thing I noticed. Is that in some cases all the slides are shown and all dots are in the bottom nav. But after a refresh or resizing of the browser the dots are correct to the amount of images in the CMS. Probably something to do with the script being load before the slides. Is there a way to delay the line of code to first load the slider and then calculate the amount of slides.

[Oyvind_Hermans (Øyvind Hermans)]

Hello sir!

Just wanted to thank you for this solution, works like a charm!

[ShipStud (Roarke)]

@jasondark I’m hoping you or someone here can tweak this setup to take advantage of Webflow’s Responsive Images. Unfortunately the “background images” are not optimize the same way “Images” are yet and my client keeps seeing blurry photos.

Here is my read only link

Website: Estate: 1920
password: Alfa2020!

Any Ideas?

[jasondark]

You could alter the code and create an image in each slider, then set its src. Then you would avoid using background images.

[ShipStud (Roarke)]

@jasondark would you be able to alter the code to take advantage of responsive images and paste example here to copy? Unfortunately, I really wouldn’t know where to start (having followed your previous example as closely as possible).

Read Only Link

In any case, knowing that it is possible is exciting! Thanks for your suggestion

[manuel]

Hi,

first of all thank you for the great example and the possibility to easy make a clone. My question is, is it possible to have more than one slider on one page? I would like to make two different sliders.

Thanks for your help,
Manu

[jasondark]

Hi yes it would be but you would need to alter the script to detect multiple sliders and bind each collection of images to its appropriate slider with some sort of tag so that you can merge them together correctly.

[anton_atom (Anton)]

@jasondark
Thank you for this amazing code.
It’s going to improve an open article page on a site that I’m working on.

I did everything like in your example, but unfortunately, it doesn’t work (probably somewhere I missed something). In the console, it shows this error – Monosnap.
I’m pretty weak in .js code, so can take a look, and maybe you can help me with this issue?

Here is a link to a specific page with a slider – https://issho.webflow.io/blog-posts/earum-possimus-rerum-et
And here is a read-only link to the webflow – https://preview.webflow.com/preview/issho?utm_medium=preview_link&utm_source=designer&utm_content=issho&preview=a178c54a153fc72ffe19a98d26d41b5a&pageId=5ff2cae3ffc655b3c5f3f6f5&itemId=60046580f11a484502605cd7&mode=preview

BTW thank you once again for a great solution

[anton_atom (Anton)]

Ok, so I figured out what was wrong
I didn’t assign slider attributes for slider left-right buttons. After assigning it – everything starts to work well.

So in case if someone will face a similar problem – here are attributes, that you should assign in your slider:
data-cms=“image” – to CMS images that should be inside of each slide
data-cms="slider – to slider main component
data-cms=“slide” – to each slide block inside of slider element
data-cms=“left-arrow” – to slider left arrow
data-cms=“right-arrow” – to slider right arrow

Also, I have met one more problem
If there is only one image inside of the slider, and we try to drag that image – we will go through all slides that we create in our file.
To disable drag gesture we need to add this code in our body:

@jasondark thank you one more time for such a great slider integration solution

[niroshan]

Has anyone figured out how to do a nested multi-image slider? I’m trying to create a projects page that loads a modal with a slider for each project of images.

Thanks so much!

[otherportfolio]

Also want to thank you for sharing this!

[BenG87 (Ben)]

Hi,

This script is exactly what I’ve been looking for a site I’m working on, I’ve set everything up as with the clone example, naming all the attributes for the the collection list on the page, the slider, slides and arrows as I should, but my slider is still showing grey boxes, just wondering if someone could tell me where I’m going wrong.

A link to the site is below:

Design Professional Websites Visually