Widget:Slick：修订间差异
来自OGAS数据中枢
更多语言
更多操作
首页轮播图用的 |
imported>弃权者 无编辑摘要 |
||
| （未显示2个用户的12个中间版本） | |||
| 第6行： | 第6行： | ||
<style> | <style> | ||
/* 微调箭头和圆点的位置 */ | |||
.slick-prev { left: 15px; z-index: 10; } | .slick-prev { left: 15px; z-index: 10; } | ||
.slick-next { right: | .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-prev:before, .slick-next:before { font-size: 30px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); } | ||
.slick-dots { bottom: 15px; } | /* .slick-dots { bottom: 15px; }*/ | ||
/*圆点指示器自定义*/ | |||
.gf-slick-dots { position: absolute; bottom: 20px; left: 10%; 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: 8px; height: 8px; border-radius: 50%; background-color: white; box-shadow: 0 0 0 2px 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 2px rgba(0, 0, 0, 0.5), 0 0 4px rgba(255, 255, 255, 0.8); } | |||
/*固定图片宽度100%*/ | |||
.carousel-slide { width: 100%; } | |||
.carousel-slide img { max-width:100%; height: auto; display: block; } | |||
</style> | </style> | ||
<script> | <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> | </script> | ||
</includeonly> | </includeonly> | ||
2026年3月3日 (二) 07:37的最新版本
这是首页大图专用的 Slick 轮播图微件。