I am struggling with Slick Slider in a custom module. I have used Slick on a different page (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
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
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:
I have also turned on Include jQuery:
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