查看“︁Widget:Slick”︁的源代码

<noinclude>
这是首页大图专用的 Slick 轮播图微件。
</noinclude><includeonly>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

<style>
/* 微调箭头和圆点的位置 */
.slick-prev { left: 15px; z-index: 10; }
.slick-next { right: 25px; z-index: 10; }
.slick-prev:before, .slick-next:before { font-size: 30px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
// .slick-dots { bottom: 15px; }

//圆点指示器自定义
.gf-slick-dots { position: absolute; bottom: 20px; left: 0; right: 0; display: flex !important; justify-content: center; gap: 12px; list-style: none; padding: 0; margin: 0; z-index: 10; }
.gf-slick-dots li button { width: 14px; height: 14px; padding: 0; border: none; background: transparent; text-indent: -9999px; cursor: pointer; position: relative; }
.gf-slick-dots li button:before { content: ''; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background-color: white; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.5); transition: all 0.3s ease; }
.gf-slick-dots li.slick-active button:before { transform: scale(1.2); background-color: white; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 255, 255, 0.8); }


/*固定图片宽度100%*/
.carousel-slide { width: 100%; }
.carousel-slide img { max-width:100%; height: auto; display: block; }
</style>

<script>
/* 引入脚本并启动 */
(window.RLQ = window.RQ || []).push(['jquery', function() {
    $.getScript('https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js').then(function() {
        $('.main-carousel').not('.slick-initialized').slick({
            dots: true,
            arrows: true,
            infinite: true,
            autoplay: true,
            autoplaySpeed: 4000,
            swipe: true,
            dotsClass: 'gf-slick-dots'
        });
    });
}]);
</script>
</includeonly>