我希望在我的网站主页和分类页面顶部有一个轮播滑块，可以通过设置面板选择和指定一些精选主题和图片。
之前我希望在桌面和移动设备上都实现以下效果 
这个提供了一个线索，但工作仍在进行中
所以我听取了@Moin的建议，尝试了Featured Tiles组件。但是没有轮播效果，而且对移动设备不友好。我做了一些工作来实现这个效果
桌面
移动设备
但是移动端有两个问题，
-
当我从主题页面转到主页时，轮播效果失效，除非我再次点击主页按钮，似乎是javascript没有加载
-
发生未捕获的TypeError
我正在使用的Javascript
<script type="text/discourse-plugin" version="0.8.13">
window.onload = function() {
let slideshowInterval;
function initSlideshow() {
const container = document.querySelector(".featured-tiles-container");
const tiles = document.querySelectorAll(".featured-tile");
const slideWidth = tiles[0].offsetWidth;
let currentIndex = 0;
let canSlide = true;
function slideLeft() {
if (canSlide) {
canSlide = false;
currentIndex = (currentIndex + 1) % tiles.length;
const offset = -currentIndex * slideWidth;
container.style.transition = "transform 0.5s ease-in-out";
container.style.transform = `translateX(${offset}px)`;
setTimeout(() => {
canSlide = true;
container.style.transition = "none";
}, 500);
}
}
function startSlideshow() {
slideLeft();
slideshowInterval = setInterval(slideLeft, 3000);
}
startSlideshow();
}
function destroySlideshow() {
clearInterval(slideshowInterval);
}
api.onPageChange((url) => {
destroySlideshow();
if (url === "/" || url.indexOf("/c/") === 0) {
initSlideshow();
}
});
}
</script>
@Arkshine @Lilly 有什么解决方案或想法吗？
1 个赞
Moin
5
也许这些组件中的一个可以作为替代方案。您可以在顶部放置主题，但没有轮播。
1 个赞
您好 @Moin 感谢您的建议。我会尝试是否能实现轮播图 
出于好奇，我试了一下。该组件运行正常。
您至少需要 2 张图片，而且它不知何故被限制在 /categories 路由上。 
.
2 个赞
Lilly
(Lillian Louis)
8
哈哈，不错！
我没测试。我只是根据 OP 推断的，而且因为它说还在开发中，并且 git 仓库中没有元主题信息，所以我认为它还没在工作。
另外，这个组件很酷。
1 个赞
@Moin 我尝试了“精选文件”，最终通过自定义 CSS 和 JavaScript 实现了轮播，但需要添加额外的 CSS 才能在手机上友好显示 
3 个赞
Moin
10
3 个赞
你好 @Arkshine
我需要在主页和分类页面上使用该功能，最好能在主题内调用图片。我们将给作者更多时间 
我已经更新了我的原始主题，请查看，如果你有什么想法
祝福！
@Lilly @Moin
1 个赞
如果您仍想尝试此组件，我已将其fork以添加一个 show_on 设置，您可以在其中选择显示位置。
URL：https://github.com/Arkshine/discourse-big-carousel-component
分支名称：feature/new_settings
（我不知道原始组件的状态，希望fork它没有问题 
，也不确定是否应该向他们提出更改）。
4 个赞
Aizada_M
(Aizada M)
17
你好！很棒的工作 
昨天我安装了这个主题组件，一切正常，除了：
-
当我滚动轮播图时，在某个点图像会分裂成两半，但这并非总是发生。这是个例子：
-
在我点击轮播图中的按钮，跳转到另一个页面，然后返回主页后，横幅中的内容会缩小。这不是一个永久性的错误，随时可能发生。这是错误的例子：
供参考。在台式机上我使用的是 Chrome 浏览器，在 Android 智能手机上我使用的是 Huawey 浏览器。
当然，我明白这个组件仍在开发中，但我还是决定与您分享这些信息。
默认情况下，图像会根据可用空间重复。您可以使用一些 CSS 来更改此行为。我将创建一个设置来控制图像，例如其位置、大小等。
目前，您可以尝试使用：background 属性。（需要 !important）
.custom-big-carousel-slide {
background-repeat: no-repeat !important;
}
- 我无法重现它。
不过，我曾经在控制台中看到一个错误（现在看不到了）；也许这与此有关。我会看看！
2 个赞
Aizada_M
(Aizada M)
19
Aizada_M
(Aizada M)
20
你好！
我玩了一下 CSS，很喜欢能够控制轮播图中图片的背景的能力 。我也希望 CSS 能解决我最初的问题。在正常状态下，轮播图中的图片可以正常切换，但只要我点击 latest、new 或 active 按钮中的任何一个，在切换轮播图中的图片和内容时，它们的完整性就会被破坏——开头出现在结尾，结尾出现在开头。这显然是一个系统错误 
。
小狗的眼睛在哪里？！
，我会尝试你的 CSS 版本，希望它有帮助 