Slick.js Multiple Rows

HTML

<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<section id="categorias__kiosco">
    <div class="first__categorias">
        <div class="slider__clip">
            <div class="slider__slides">
                <div class="box-banner">
                    <a href="/kiosco-dia/alfajores/?fq=H:272"><img width="416" height="270" id="ihttps://ardiaqa.vteximg.com.br/arquivos/ids/188975/ALFAJORES.jpg?v=636788499809470000" alt="00_alfajores" src="https://ardiaqa.vteximg.com.br/arquivos/ids/188975/ALFAJORES.jpg?v=636788499809470000" complete="complete"></a>
                </div>
                <div class="box-banner">
                    <a href="/kiosco-dia/chicles/?fq=H:274"><img width="416" height="250" id="ihttps://ardiaqa.vteximg.com.br/arquivos/ids/188976/CHICLES.jpg?v=636788502338200000" alt="01_chicles" src="https://ardiaqa.vteximg.com.br/arquivos/ids/188976/CHICLES.jpg?v=636788502338200000" complete="complete"></a>
                </div>
    <div>3</div>
    <div>4</div>
        <div>5</div>
    <div>6</div>
        <div>7</div>
    <div>8</div>
            </div>
            <div class="slider__arrows"></div>
            <div class="slider__dots"></div>
        </div>
    </div>
</section>

CSS

.box-banner img{
  width:100px;
}
.box-banner{
  width:100px;
}

JavaScript

$(document).ready(function () {

    $('.first__categorias .slider__slides').slick({
        slidesToShow: 4,
        slidesToScroll: 4,
        draggable: true,
    });
});