# Problems with Slick Slider

**URL:** <https://community.hubspot.com/t/problems-with-slick-slider/107341>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [May 16, 2024, 3:27pm UTC](https://community.hubspot.com/t/problems-with-slick-slider/107341 "2024-05-16T15:27:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![SlimSr2003](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/slimsr2003/32/73373_2.png) [@SlimSr2003](https://community.hubspot.com/u/SlimSr2003)\
**Post date:** [May 16, 2024, 3:27pm UTC](https://community.hubspot.com/t/problems-with-slick-slider/107341/1 "2024-05-16T15:27:32Z")

</div>

I am struggling with Slick Slider in a custom module. I have used Slick on a different page ([jonespr.net](http://jonespr.net) domain) and it works just fine as you can see on the top and the bottom sections of this page: [https://www.jonespr.net/marcome\_mode\_test-1](https://www.jonespr.net/marcome_mode_test-1)

Now, I am working in a different instance of HubSpot for a client and I have set up a new module using Slick just like I had previousl done for JONES and it is not working at all. The for loop is working but it is not animating. You can see what I mean here: [https://45821948.hs-sites.com/testing-page](https://45821948.hs-sites.com/testing-page)

Here is the HTML in the module:

\<div class=“ss-slider”\>  
{% for item in module.slider\_text\_container %}  
\<div class=“slider-background” style=“background-color: {{ module.style.slide\_background\_color.color }};”\>  
\<div class=“slider-background-graphic” style=“background-image:url({{ module.style.background\_pattern\_image.src }}); height: 100%; width: auto;”\>  
\<div class=“stat-text-left-container”\>  
\<div class=“stat-text-left”\>  
{% if item.podcast\_guest\_profile\_image.src %}  
{% set sizeAttrs = ‘width=“{{ item.podcast\_guest\_profile\_image.width }}” height=“{{ item.podcast\_guest\_profile\_image.height }}”’ %}  
{% if item.podcast\_guest\_profile\_image.size\_type == ‘auto’ %}  
{% set sizeAttrs = ‘width=“{{ item.podcast\_guest\_profile\_image.width }}” height=“{{ item.podcast\_guest\_profile\_image.height }}” style=“max-width: 100%; height: auto;”’ %}  
{% elif item.podcast\_guest\_profile\_image.size\_type == ‘auto\_custom\_max’ %}  
{% set sizeAttrs = ‘width=“{{ item.podcast\_guest\_profile\_image.max\_width }}” height=“{{ item.podcast\_guest\_profile\_image.max\_height }}” style=“max-width: 100%; height: auto;”’ %}  
{% endif %}  
{% set loadingAttr = item.podcast\_guest\_profile\_image.loading != ‘disabled’ ? ‘loading=“{{ item.podcast\_guest\_profile\_image.loading }}”’ : ‘’ %}  
\<img src=“{{ item.podcast\_guest\_profile\_image.src }}” alt=“{{ item.podcast\_guest\_profile\_image.alt }}” {{ loadingAttr }} {{ sizeAttrs }} class=“rounded-corners”\>  
{% endif %}  
\</div\>  
\</div\>  
\</div\>  
\<div class=“stat-text-right”\>  
{% inline\_rich\_text field=“stat\_text\_right” value=“{{ item.stat\_text\_right }}” %}  
\</div\>  
\</div\>  
{% endfor %}  
\</div\>

Here is the CSS:

.ss-slider {  
display: flex;  
flex-direction: column;  
justify-content: center;  
width: 100%;  
height: auto;  
margin: auto;  
}  
.slider-background {  
display: flex;  
flex-direction: row;  
align-items: center;  
width: 100%;  
height: auto;  
margin:auto;  
}

.stat-text-left {  
display: flex;  
width: 30%;  
height: auto;  
padding-top: 60px;  
padding-bottom: 60px;  
}

img.sizing {  
width: 100%;  
height: auto;  
object-fit: cover;  
}

.stat-text-right{  
display: flex;  
justify-content: flex-start;  
align-items: flex-start;  
width: 60%;  
height: auto;  
margin: auto;

}

Here is the module.js script:

$(document).ready(function(){  
$(‘ss-slider’).slick({  
slidesToShow: 3,  
slidesToScroll: 1,  
autoplay: true,  
autoplaySpeed: 2000,  
});  
});

I have connected the Slick stylesheets, and the java script files:

 ![SlimSr2003_0-1715873066826.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/6/6a97f2f06f41f8f6e07de668ade92cbf02c6e85e.png)

I have also turned on Include jQuery:

 ![SlimSr2003_1-1715873187939.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/9/79a35942051d66dbad7808ed2fb5e5bd9729046d.png)

Now I will say that there was a previous developer for the JONES domain so its possible they added some script somewhere I am not aware of that is making it work on that domain. But right now I am completely confused. Any assistance would be greatly appreciated.

Thanks

Scott

---

<div class="post-metadata">

**Author:** ![Endhrakumar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/endhrakumar/32/34299_2.png) [@Endhrakumar](https://community.hubspot.com/u/Endhrakumar)\
**Post date:** [May 16, 2024, 5:18pm UTC](https://community.hubspot.com/t/problems-with-slick-slider/107341/2 "2024-05-16T17:18:03Z")

</div>

Hi there,

Just noticed in js file instead of ss-slider try with ‘.ss-slider’. Thank you

---

<div class="post-metadata">

**Author:** ![SlimSr2003](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/slimsr2003/32/73373_2.png) [@SlimSr2003](https://community.hubspot.com/u/SlimSr2003)\
**Post date:** [May 17, 2024, 9:17pm UTC](https://community.hubspot.com/t/problems-with-slick-slider/107341/3 "2024-05-17T21:17:56Z")

</div>

Hi Endhrakumar,

I have made that change. It has not seemed to fix the issue. Any other thoughts?

Thanks Scott

---

<div class="post-metadata">

**Author:** ![SlimSr2003](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/slimsr2003/32/73373_2.png) [@SlimSr2003](https://community.hubspot.com/u/SlimSr2003)\
**Post date:** [May 17, 2024, 9:37pm UTC](https://community.hubspot.com/t/problems-with-slick-slider/107341/4 "2024-05-17T21:37:17Z")

</div>

OK turns out this did work! Awesome Thank you!