光滑不起作用

Question

我正在开发一个HTML模板，我确实需要光滑来处理推荐的轮播，但即使我点了div ID也没有发生任何事情。

我在控制台中没有出错。

这是我正在使用的代码：

---- HTML ----

<section id="testimonials">
<h2 class="text-center text-uppercase margin-bottom-3">testimonials</h2>
<div class="row is-full">
    <div class="columns large-8 medium-8 hide-for-small-only nopadding">
        <img src="assets/img/testimonials-bg.jpg" alt="placeholder"/>
    </div>
    <div class="large-4 medium-4 small-12 bg-odd rel" id="tSlider">
        <div class="text-center margin-3">
            <img src="assets/img/test1.jpg" class="testimonial is-rounded" alt="test1">
            <h5 class="text-capitalize">john doe</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam at deserunt dignissimos doloribus.</p>
        </div>
        <div class="text-center margin-3">
            <img src="assets/img/test1.jpg" class="testimonial is-rounded" alt="test1">
            <h5 class="text-capitalize">john doe</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam at deserunt dignissimos doloribus.</p>
        </div>
        <div class="text-center margin-3">
            <img src="assets/img/test1.jpg" class="testimonial is-rounded" alt="test1">
            <h5 class="text-capitalize">john doe</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam at deserunt dignissimos doloribus.</p>
        </div>
    </div>
</div>
<div class="divider"></div>

---- JS ----

$(document).on(ready, function(){
    $('#tSlider').slick({
        infinite: true,
        autoPlay: true,
        dots: true,
        autoPlaySpeed: 3500
    });
});