Carosel and Tile Size Doesn't want to work

Developer Support CMS Development
1

Hi Team

I’m trying to build a simple carousel tile module for adding articles and videos, but I’m running into two issues: the carousel isn’t activating, and the tiles resize based on content. I want them to be fixed and standardized. Below is the code I’m using; any help would be appreciated.

HTML

{% if module.tiles %}

<link rel=“stylesheet” href=“//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css”/>

<section class=“section-tiles insights”>
<div class=“shell”>

```
<div class=“section-tiles__head”>
{{ module.richtext_field }}
</div>

<!-- ADD no-slider CLASS -->
<div class=“tiles js-slider no-slider”>

{% for item in module.tiles %}

{% set href = “” %}

{% if item.link_field and item.link_field.url and item.link_field.url.href %}
{% set href = item.link_field.url.href %}
{% elif item.link_field and item.link_field.href %}
{% set href = item.link_field.href %}
{% endif %}

<div class=“tile”>
<div class=“insight-card”>

{% if href %}
<a href=“{{ href }}” target=“_blank”>
{% endif %}

<div class=“insight-card__media”>
<img src=“{{ item.thumbnail_image.src }}” alt=“{{ item.title }}”>
</div>

<div class=“insight-card__content”>

{% if item.label %}
<span class=“insight-card__label”>{{ item.label }}</span>
{% endif %}

<h3>{{ item.title }}</h3>

{% if item.description %}
<p class=“description”>{{ item.description }}</p>
{% endif %}

{% if item.date_field %}
<p class=“date”>
{{ item.date_field|datetimeformat(‘%-d %b %Y’) }}
</p>
{% endif %}

<span class=“cta”>Read more →</span>

</div>

{% if href %}
</a>
{% endif %}

</div>
</div>

{% endfor %}

</div>
```

</div>
</section>

<script src=“//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js”></script>

{% endif %}

CSS

.shell {
width: 100%;
max-width: 1168px;
margin: 0 auto;
padding: 0 20px;
}

.section-tiles {
padding: 40px 0;
}

/* DEFAULT: NON-SLIDER STATE */
.tiles.no-slider {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}

/* 3 columns layout */
.tiles.no-slider .tile {
width: 33.333%;
}

/* spacing */
.tile {
padding: 0 10px;
box-sizing: border-box;
}

/* WHEN SLICK IS ACTIVE */
.tiles:not(.no-slider) {
margin: 0 -10px;
}

/* CARD */
.insight-card {
background: #fff;
border: 1px solid #E6E8EB;
border-radius: 6px;
overflow: hidden;
}

/* IMAGE */
.insight-card__media img {
width: 100%;
height: 180px;
object-fit: cover;
}

/* CONTENT */
.insight-card__content {
padding: 15px;
}

.insight-card__label {
font-size: 12px;
text-transform: uppercase;
color: #6b7280;
}

.insight-card h3 {
font-size: 16px;
color: #4B97B2;
margin: 10px 0;
}

.date {
font-size: 12px;
color: #8D969F;
}

.description {
font-size: 14px;
color: #00273E;
}

.cta {
font-weight: bold;
}

JS

$(document).ready(function () {

var $slider = $(‘.tiles’);

if (!$slider.length) return;

if (typeof $.fn.slick !== ‘undefined’) {

```
$slider.slick({
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
dots: false,
infinite: false,

responsive: [
{
breakpoint: 1024,
settings: { slidesToShow: 2 }
},
{
breakpoint: 640,
settings: { slidesToShow: 1 }
}
]
});
```

} else {
console.error(“Slick JS not loaded”);
}

});

2

Hey @JMackenzie8,

the Slick slider requires jQuery to work.

it also seems that you’re loading the slick CSS and JS directly into the body-tag - which might be the reason for not working properly.

If you’re not already using jQuery or don’t want to implement it (wouldn’t recommend it these days), it won’t work.

A few good alternatives for the Slick slider, which don’t require jQuery

General recommendations:

  • Copy paste the content of the slider(any of those) CSS and JS into your theme by creating a new file like splide.css, splide.js, slick.css, slick.js and load it into the module.
  • Load it into the module by either selecting it in the right sidebar in the design-manager, the meta.json (iif you’re working with local development) or with a require_css(function), require_js(function) or the corresponding tags - require_css(tag), require_js(tag), require_head(tag)

Here’s an example for a Slick slider setup:

{# Configuration #}
{% require_css('path_to_splide.css') %}
{% require_js('path_to_splide.js') %}

{# Optional configuration if you want to add per module settings #}
{% require_css %}
<style>
{% scope_css %}
#splide-{{name|md5}}{
background-color: {{module.styles.background_color.css}}
}
{% end_scope_css %}
</style>
{% end_require_css %}

{% require_js %}
<script>
new Splide( '#splide-{{name|md5}}', {
 type: {{ module.configuration.slider_type %} {# a choice option in a configuration group #}
 perPage: {{ module.configuration.page_amount }} {# a number field in the configuration group to define how many images are displayed #}
} );
</script>
{% end_require_js %}

{# Module #}
<section id="splide-{{name|md5}}" class="splide" aria-label="{{module.slider_aria}}"> {# module.slider_aria is a text_field #}
<div class="splide__track">
<ul class="splide__list">
{% for single_slide in module.slides %}
<li class="splide__slide">
<img src="{{ single_slide.image.src }}" alt="{{ single_slide.image.src }}" class="single-slide__image"> {# replace this with your functionality #}
</li>
{% endfor %}
</ul>
</div>
</section>

hope this helps

best,

Anton