Как сделать так, чтобы мой скользящий слайдер работал так, как должен?

Question

Я хочу использовать слик для моего слайдера, но по некоторым причинам он не сработает, и я не знаю почему. На мой взгляд, все выглядит хорошо, но, очевидно, есть ошибка, но я не могу понять, где моя ошибка, поэтому я надеюсь, что вы, ребята, могли бы помочь понять, в чем я не прав.

Спасибо, ребята: D

<div class="cate_slider">
    <div>
        <p>Écologiste</p>
        <?= $this->Html->image('euros2.png', ['alt' => 'Image Écologiste', 'class' => 'cate_mini'])?>
        <p><span class="keyword">Pour retrouver la sérénité...</span><br>Détendez-vous, respirez pleinement aide à prendre conscience des éléments utiles qui vous entours. Laissez place au vide apaisera votre esprit.</p>
    </div>
    <div>
        <p>Écologiste</p>
        <?= $this->Html->image('euros2.png', ['alt' => 'Image Écologiste', 'class' => 'cate_mini'])?>
        <p><span class="keyword">Pour retrouver la sérénité...</span><br>Détendez-vous, respirez pleinement aide à prendre conscience des éléments utiles qui vous entours. Laissez place au vide apaisera votre esprit.</p>
    </div>
    <div>
        <p>Écologiste</p>
        <?= $this->Html->image('euros2.png', ['alt' => 'Image Écologiste', 'class' => 'cate_mini'])?>
        <p><span class="keyword">Pour retrouver la sérénité...</span><br>Détendez-vous, respirez pleinement aide à prendre conscience des éléments utiles qui vous entours. Laissez place au vide apaisera votre esprit.</p>
    </div>
    <div>
        <p>Écologiste</p>
        <?= $this->Html->image('euros2.png', ['alt' => 'Image Écologiste', 'class' => 'cate_mini'])?>
        <p><span class="keyword">Pour retrouver la sérénité...</span><br>Détendez-vous, respirez pleinement aide à prendre conscience des éléments utiles qui vous entours. Laissez place au vide apaisera votre esprit.</p>
    </div>
</div>

$(document).ready(function(){
    $('.center').slick({
        centerMode: true,
        centerPadding: '60px',
        slidesToShow: 3,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            }
        ]
    });
});

Answer 1

Хорошо, я понял, где моя проблема.

Я добавляю гладкий CSS-файл, который не загружается (как глупо с моей стороны), он теперь работает.

Спасибо за мысли, ребята <3</p>