<td>内部的Slick.js旋转木马

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 Slick.js 的 CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<!-- 引入 Slick.js 的 JS -->
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<table>
    <tr>
        <td>
            <div class="my-carousel">
                <div>你的内容 1</div>
                <div>你的内容 2</div>
                <div>你的内容 3</div>
                <!-- 更多内容 -->
            </div>
        </td>
    </tr>
</table>

<script>
$(document).ready(function(){
    $('.my-carousel').slick({
        // 这里可以设置选项
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
    });
});
</script>

.my-carousel .slick-slide {
    padding: 10px;
    background: #eee;
    border: 1px solid #ccc;
}

$('.my-carousel').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    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
            }
        }
    ]
});