Help me create a multicolumn image custom section

Shopify Discussion
1

I wanted to make this multicolumn custom section to display brand collaboration in brand logo with a slide animation in a column on desktop and mobile.

I have prepared this section but seems to miss something to, using the ‘Copy of Stiletto’ theme to develop this feature.

holygrails_in_0-1723117737976.png
holygrails_in_0-1723117737976.png1308×422 173 KB

holygrails_in_1-1723117811723.png
holygrails_in_1-1723117811723.png548×396 79.4 KB

Wanted it to look like this:-

holygrails_in_2-1723117883350.png
holygrails_in_2-1723117883350.png1335×153 4.42 KB

holygrails_in_3-1723117944631.png
holygrails_in_3-1723117944631.png1291×223 38.5 KB

Video capture Link- https://drive.google.com/file/d/1NMCFg2DhoNdkOt8uNiezgYVh-HCAasB-/view?usp=sharing

Code so far-

(in a new section template)

<div>
{%- unless section.settings.heading == blank -%}
<h2 class="ff-heading fs-heading-3-base section-introduction__heading">
{{ section.settings.heading }}
</h2>
{% endunless %}

<div class="row">
{% for block in section.blocks %}
{% if block.type == 'slide' %}
<div class="column">
<a href="{{ block.settings.url }}">
<img
src="{{ block.settings.image | image_url: width: 200 }}"
alt="{{ block.settings.image.alt | default: 'Image' }}"
width="200"
height="auto"
class="centre"
>
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>

{% stylesheet %}
.row {
height: fit-content;
}
.centre {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
background-color: #ffffff;
border: 1px solid #F5F5DC;
}
{% endstylesheet %}

{% javascript %}
$(document).ready(function(){
$('.row').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 6,
slidesToScroll: 1,
centerMode: true,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
{% endjavascript %}

{% schema %}
{
"name": "Multi Column Custom",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading"
}
],
"presets": [
{
"name": "Multi Column Custom Section"
}
],
"blocks": [
{
"name": "Brand Icon",
"type": "slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "url",
"label": "URL"
}
]
}
]
}
{% endschema %}

Also have included these scripts in the head in theme.liquid

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"
integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"
integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
defer="defer"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.5.2/jquery-migrate.min.js"
integrity="sha512-BzvgYEoHXuphX+g7B/laemJGYFdrq4fTKEo+B3PurSxstMZtwu28FHkPKXu6dSBCzbUWqz/rMv755nUwhjQypw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
defer="defer"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
defer="defer"
></script>