Styling a Slick Slider in Webflow

Hi Webflow community,

I have finally been able to implement a basic Slick slider… very basic

And i want to learn on styling it to give it some ‘umf’ And i’ve been looking online for help and looking at codepen to mess around with things, but i have next to 0 knowledge on code and i keep breaking it.

I do not want a red background (no idea how that’s there) and i want it to span more of the view width, then to be responsive on smaller devices, even if that means changing the slidestoshow to a lower number.
Any help would be amazing, my published site is here. (There will be ongoing changes to the website. Its currently my job is to learn webflow)

https://design-studio-copy.webflow.io/timeline-test

Will

Hey @Lozzaa, could you please share a read-only link to your project please?

@Lozzaa - you have a class called draggable on your slick-list div that has background color set to red:

image

That class is defined in your Webflow stylesheet so it must be a class you added rather than something from Slick Slider.

Hi there! Here is my read only:
https://preview.webflow.com/preview/design-studio-copy?utm_medium=preview_link&utm_source=designer&utm_content=design-studio-copy&preview=6956dbdaddccd46078e7e73fb7c16311&pageId=60f9456750902959e6bf2fd6&workflow=preview

Pretty much all of the code has been copied from this forum, and i’ve added to it from elsewhere (codepen, etc)

Thanks for any help!

Hi there, just had a look, checked to see if any of the divs or the embed has a background colour for whatever reason, and nope, nothing is standing out to me as having a red background. Here is my read-only for the page if you want to have a closer look at whats going on :slight_smile:
https://preview.webflow.com/preview/design-studio-copy?utm_medium=preview_link&utm_source=designer&utm_content=design-studio-copy&preview=edecfcbcbd0f83ade222934cae792225&pageId=60f9456750902959e6bf2fd6&workflow=preview

@Lozzaa - your read only is 404’ing for me. Can you repost?

oh right, dont know how thats happening, here it is https://preview.webflow.com/preview/design-studio-copy?utm_medium=preview_link&utm_source=designer&utm_content=design-studio-copy&preview=6956dbdaddccd46078e7e73fb7c16311&pageId=60f9456750902959e6bf2fd6&workflow=preview

Edit: When posting this, the slider has broke somehow… although i cannot think whats changed and whats causing it to break :frowning:

@sam-g @imtiazraqib

@Lozzaa

This syntax is incorrect:

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(".slickdemo").slick({
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function(){
    $('.slickdemo').slick({
    adaptiveHeight: false,
    infinite: true,
    dots: true,
    arrows: false,
 		speed: 300,
    autoplay: true,
  	 autoplaySpeed: 3000,
    centerMode: false,
    centerPadding: '60px',
    slidesToShow: 3,
  	
    });
  })

  </script>

Remove the call to the slick.min.js in the fourth line and then the opening script tag after it. You are also instantiating the slick slider twice and one instance is wrapped in a document.ready which I believe is u necessary. Try this instead:

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
    $('.slickdemo').slick({
    adaptiveHeight: false,
    infinite: true,
    dots: true,
    arrows: false,
 		speed: 300,
    autoplay: true,
  	 autoplaySpeed: 3000,
    centerMode: false,
    centerPadding: '60px',
    slidesToShow: 3,
  	
    });
  </script>

Hi Sam, just tested that code on it and nothing appears on the published site. I just replaced the code in the body tag. But it doesn’t work.

Any ideas?

Will

Hey @Lozzaa, when I preview your read-only link, the slickdemo html embed is set as display: none.
Since there are no interactions associated to this section, I am guessing this could be the reason the Slider is gone altogether. Select the slickdemo and set the display as block or as you need.

Hi there, it worked before, and it was something i copied from someone else, i just set it to static and then published it, still nothing appearing.

Will

@Lozzaa - I’m not entirely sure why, maybe they hide the slider on load and use js to display, but from the source css the slider is set to display none:

If you turn that off the slider appears:

It appears this is intended functionality:

For some reason the slick-initialized class isn’t setting display block, you can see the class on one of your slides here:

Are you sure the demo you got this from uses the same version of the slick slider library that you are using?

Hi @sam-g

Thanks for the help with this, here is where i got my original code from this post:

Using the read only provided by Jeff S i used that code and i tried to build on top of it to make it look better etc etc.

Update: I cross checked the original and added some bits that i thought were missing, now i can barely see a difference (apart from some extra bits i added)

Cheers,
Will

@Lozzaa try removing this Slick-slide div you have wrapped around everything:

image

I think that class on that div is being styled by the library to display none and is causing issues for you. See the original example here:

image

Hi again @sam-g

Sorry for the late reply, i deleted the Slick-slide div and WE HAVE SOMETHING! The Slider is being displayed, just with the red background etc etc, thanks for the help for that bit!