Webflow CMS Slider using Slick Slider script breaks the CMS Editor

Community resources General
1

I have a Webflow site that requires an automatic slider connected to the Webflow CMS so the client can regularly update their hero slides.
The only method I found to get this working was with @PixelGeek using the Slick Slider script.
https://www.youtube.com/watch?v=9buBhrqaZEA
This worked a treat, however we soon released that this script was causing the CMS editor to crash when we tried to engage it on www.granddesigns.ie?edit

Webflow Support offered us an adjustment to the SlickSlider script, whereby it gets disabled when the CMS editor loads, however although this resolves the issue, it also breaks the slick slider on the live website!! :angry:

This is hugely frustrating folks! How do we provide a client a simple CMS driven slider without the need for scripts that ultimately end up breaking/crashing the CMS editor login window!!

https://preview.webflow.com/preview/grand-designs-kitchens-bedrooms?utm_medium=preview_link&utm_source=designer&utm_content=grand-designs-kitchens-bedrooms&preview=a99819e5b4b25a4eb6490ca9fbfa684d&workflow=preview

2

I’m running into this same problem. Slickslider works great, but the Editor doesn’t work.

I have used Owl Carousel in the past to do similar things and I’ve never had an issue with it breaking the Editor.

3

Hey there,
I ended up having to use a code snippet that disabled the Slickslider when the Editor was engaged. I’ve pasted this code below. I then had to inform my clients that when they were in edit mode their slider wasn’t actually broken, it just looks really off as all the slides stack on top of each other. Not an ideal situation having to explain this. Webflow wouldn’t class it as a bug either as it was custom code, however it also doesn’t really have a straightforward CMS solution to make hero sliders.

<script>
// Snippet to keep code from running when the Editor is open
var Webflow = Webflow || [];
Webflow.push(function () {
if (!Webflow.env("editor")) {
$('.dyn-list').slick({
		adaptiveHeight: true,
    autoplay: true,
    pauseOnDotsHover: true,
    prevArrow: '<button type="button" class="slick-prev"><</button>',
    nextArrow: '<button type="button" class="slick-next">></button>'
});
}
});
</script>