# 移动端使用 Carousel 滑块和 Featured Tiles 组件？

**URL:** https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988
**Category:** Development
**Created:** [2023 年10 月 21 日 16:48 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988 "2023-10-21T16:48:38Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### 作者： ![Dennis\_P\_Z](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dennis_p_z/32/330504_2.png) [@Dennis\_P\_Z](https://meta.discourse.org/u/Dennis_P_Z)
#### 发布日期： [2023 年10 月 21 日 16:48 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/1 "2023-10-21T16:48:38Z")

</div>

我希望在我的网站主页和分类页面顶部有一个轮播滑块，可以通过设置面板选择和指定一些精选主题和图片。

之前我希望在桌面和移动设备上都实现以下效果 👇

 ![carousel-cover-1200x900](https://global.discourse-cdn.com/meta/original/4X/5/d/d/5dd2d0d4436bfa9a7aff850811710a45f423e744.png)

这个提供了一个线索，但工作仍在进行中

> **[GitHub - discourse/discourse-big-carousel-component: Work in progress](https://github.com/discourse/discourse-big-carousel-component)**
>
> Work in progress

所以我听取了@Moin的建议，尝试了Featured Tiles组件。但是没有轮播效果，而且对移动设备不友好。我做了一些工作来实现这个效果 👇

**桌面**

**移动设备**

但是移动端有两个问题，

1. 当我从主题页面转到主页时，轮播效果失效，除非我再次点击主页按钮，似乎是javascript没有加载

2. 发生未捕获的TypeError  

我正在使用的Javascript 👇

```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 有什么解决方案或想法吗？

---

<div class="post-metadata">

### 作者： ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### 发布日期： [2023 年10 月 21 日 17:01 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/2 "2023-10-21T17:01:09Z")

</div>

您好 @Dennis_P_Z 👋

我相信您可以使用此组件实现您想要的功能：

> [@Topic List Previews (TLP)](https://meta.discourse.org/t/topic-list-previews-theme-component/209973):
>
> This is a Theme Component but has the option to add a complementary plugin. information_sourceSummary The original Topic Preview component that allows you to add images and excerpts (and more!) to the Topic List whilst being able to configure what additions appear on what list.hammer_and_wrenchRepository Link [GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists](https://github.com/merefield/discourse-tc-topic-list-previews)open_bookInstall Guide [Installing a theme or theme component](https://meta.discourse.org/t/install-a-theme-or-theme-component/63682) …

---

<div class="post-metadata">

### 作者： ![Dennis\_P\_Z](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dennis_p_z/32/330504_2.png) [@Dennis\_P\_Z](https://meta.discourse.org/u/Dennis_P_Z)
#### 发布日期： [2023 年10 月 21 日 17:09 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/3 "2023-10-21T17:09:59Z")

</div>

谢谢，但这是不同的

---

<div class="post-metadata">

### 作者： ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### 发布日期： [2023 年10 月 21 日 17:24 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/4 "2023-10-21T17:24:36Z")

</div>

> [@Dennis\_P\_Z](#):
>
> 然后我得到了这个组件，但它什么也没显示……
> 
> [GitHub - discourse/discourse-big-carousel-component: Work in progress](https://github.com/discourse/discourse-big-carousel-component)

链接上说它还在开发中。

---

<div class="post-metadata">

### 作者： ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### 发布日期： [2023 年10 月 21 日 18:23 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/5 "2023-10-21T18:23:22Z")

</div>

也许这些组件中的一个可以作为替代方案。您可以在顶部放置主题，但没有轮播。

- [Homepage Feature](https://meta.discourse.org/t/homepage-feature/144264)
- [Featured Topics](https://meta.discourse.org/t/featured-cards-component/217580)
- [Featured Tiles](https://meta.discourse.org/t/featured-tiles/156677)

---

<div class="post-metadata">

### 作者： ![Dennis\_P\_Z](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dennis_p_z/32/330504_2.png) [@Dennis\_P\_Z](https://meta.discourse.org/u/Dennis_P_Z)
#### 发布日期： [2023 年10 月 21 日 18:43 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/6 "2023-10-21T18:43:53Z")

</div>

您好 @Moin 感谢您的建议。我会尝试是否能实现轮播图 😉

---

<div class="post-metadata">

### 作者： ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### 发布日期： [2023 年10 月 21 日 19:03 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/7 "2023-10-21T19:03:33Z")

</div>

出于好奇，我试了一下。该组件运行正常。  
您至少需要 2 张图片，而且它不知何故被限制在 `/categories` 路由上。 🙂

![chrome_LYxltGVnmc](https://global.discourse-cdn.com/meta/original/4X/0/4/9/049d70c48c155e42073c79b746500c3f694e5e00.gif)  
.

---

<div class="post-metadata">

### 作者： ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### 发布日期： [2023 年10 月 21 日 19:30 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/8 "2023-10-21T19:30:46Z")

</div>

哈哈，不错！👌 我没测试。我只是根据 OP 推断的，而且因为它说还在开发中，并且 git 仓库中没有元主题信息，所以我认为它还没在工作。🤷🏻‍♀️

另外，这个组件很酷。🙂

---

<div class="post-metadata">

### 作者： ![Dennis\_P\_Z](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dennis_p_z/32/330504_2.png) [@Dennis\_P\_Z](https://meta.discourse.org/u/Dennis_P_Z)
#### 发布日期： [2023 年10 月 21 日 20:45 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/9 "2023-10-21T20:45:46Z")

</div>

@Moin 我尝试了“精选文件”，最终通过自定义 CSS 和 JavaScript 实现了轮播，但需要添加额外的 CSS 才能在手机上友好显示 😂

![mmexport1697920795005](https://global.discourse-cdn.com/meta/original/4X/2/5/e/25ed8bfebf00a3edb93b4cd514cf61cafe09f749.gif)

---

<div class="post-metadata">

### 作者： ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### 发布日期： [2023 年10 月 21 日 20:48 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/10 "2023-10-21T20:48:09Z")

</div>

👍  
别忘了在末尾分享你的 #Customization > Theme component

---

<div class="post-metadata">

### 作者： ![Dennis\_P\_Z](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dennis_p_z/32/330504_2.png) [@Dennis\_P\_Z](https://meta.discourse.org/u/Dennis_P_Z)
#### 发布日期： [2023 年10 月 22 日 09:52 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/11 "2023-10-22T09:52:58Z")

</div>

你好 @Arkshine  
我需要在主页和分类页面上使用该功能，最好能在主题内调用图片。我们将给作者更多时间 😋

我已经更新了我的原始主题，请查看，如果你有什么想法  
祝福！  
@Lilly @Moin

> [@Carousel sliders with Featured Tiles component on mobiles?](https://meta.discourse.org/t/help-carousel-sliders-with-featured-tiles-component-on-mobiles/282988?u=dennis_p_z):
>
> I want to have a carousel slider on top of my site homepage and category pages, some featured topics and images can be selected and designated through setting panel. Previously I wanted to have the following effect on both desktop and mobile devices point_down This one gives a hint but the work is still in progress So I took advice from @Moin to try Featured Tiles component. However there’s no carousel effect and not friendly to mobiles. I did some work to achie…

---

<div class="post-metadata">

### 作者： ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### 发布日期： [2023 年10 月 22 日 09:59 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/12 "2023-10-22T09:59:47Z")

</div>

那张照片的裁剪效果很糟糕 ☹ 小狗的眼睛在哪里？！😢

理想情况下，应该保持纵横比。

建议在保持高度的同时，将图片水平居中。

---

<div class="post-metadata">

### 作者： ![Dennis\_P\_Z](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dennis_p_z/32/330504_2.png) [@Dennis\_P\_Z](https://meta.discourse.org/u/Dennis_P_Z)
#### 发布日期： [2023 年10 月 22 日 10:19 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/13 "2023-10-22T10:19:49Z")

</div>

确实，小屏幕上总是一个选择问题，图像失真是不行的 🤣

---

<div class="post-metadata">

### 作者： ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### 发布日期： [2023 年10 月 23 日 17:58 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/15 "2023-10-23T17:58:13Z")

</div>

> [@Dennis\_P\_Z](#):
>
> 我需要在主页和分类页面上使用此功能，最好能在帖子中调用图片。我们将给作者更多时间。

如果您仍想尝试此组件，我已将其[fork](https://github.com/Arkshine/discourse-big-carousel-component/commits/feature/new_settings)以添加一个 `show_on` 设置，您可以在其中选择显示位置。

URL：`https://github.com/Arkshine/discourse-big-carousel-component`  
分支名称：`feature/new_settings`

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/f/2/1f28f62ae4f3c102b419fc17593f9869f4159621.png)

（_我不知道原始组件的状态，希望fork它没有问题 🙏，也不确定是否应该向他们提出更改_）。

---

<div class="post-metadata">

### 作者： ![Dennis\_P\_Z](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dennis_p_z/32/330504_2.png) [@Dennis\_P\_Z](https://meta.discourse.org/u/Dennis_P_Z)
#### 发布日期： [2023 年10 月 23 日 21:23 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/16 "2023-10-23T21:23:51Z")

</div>

> [@Arkshine](#):
>
> 如果你仍然想尝试这个组件，我已经[fork](https://github.com/Arkshine/discourse-big-carousel-component/commits/feature/new_settings)了它，添加了一个`show_on`设置，你可以在其中选择显示位置。

谢谢。老实说，这对组件及其用户将非常有帮助。

---

<div class="post-metadata">

### 作者： ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### 发布日期： [2023 年11 月 1 日 13:57 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/17 "2023-11-01T13:57:04Z")

</div>

你好！很棒的工作 👍  
昨天我安装了这个主题组件，一切正常，除了：

1. 当我滚动轮播图时，在某个点图像会分裂成两半，但这并非总是发生。这是个例子：  

2. 在我点击轮播图中的按钮，跳转到另一个页面，然后返回主页后，横幅中的内容会缩小。这不是一个永久性的错误，随时可能发生。这是错误的例子：  

供参考。在台式机上我使用的是 Chrome 浏览器，在 Android 智能手机上我使用的是 Huawey 浏览器。

当然，我明白这个组件仍在开发中，但我还是决定与您分享这些信息。

---

<div class="post-metadata">

### 作者： ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### 发布日期： [2023 年11 月 1 日 14:42 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/18 "2023-11-01T14:42:44Z")

</div>

1. 

默认情况下，图像会根据可用空间重复。您可以使用一些 CSS 来更改此行为。我将创建一个设置来控制图像，例如其位置、大小等。

目前，您可以尝试使用：[`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) 属性。（需要 `!important`）

```css
.custom-big-carousel-slide {
    background-repeat: no-repeat !important;
}

```

1. 我无法重现它。🤔 不过，我曾经在控制台中看到一个错误（现在看不到了）；也许这与此有关。我会看看！

---

<div class="post-metadata">

### 作者： ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### 发布日期： [2023 年11 月 8 日 14:46 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/19 "2023-11-08T14:46:25Z")

</div>

你好！🙋‍♂️  
谢谢你的建议 🙌，我会尝试你的 CSS 版本，希望它有帮助 🙂

---

<div class="post-metadata">

### 作者： ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### 发布日期： [2023 年11 月 9 日 16:54 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/20 "2023-11-09T16:54:06Z")

</div>

你好！👋  
我玩了一下 CSS，很喜欢能够控制轮播图中图片的背景的能力 👌 。我也希望 CSS 能解决我最初的问题。在正常状态下，轮播图中的图片可以正常切换，但只要我点击 `latest`、`new` 或 `active` 按钮中的任何一个，在切换轮播图中的图片和内容时，它们的完整性就会被破坏——开头出现在结尾，结尾出现在开头。这显然是一个系统错误 😔 。

---

<div class="post-metadata">

### 作者： ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### 发布日期： [2023 年11 月 9 日 17:01 UTC](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988/21 "2023-11-09T17:01:24Z")

</div>

谢谢你的反馈；我稍后会试试。 👍

[下一页](https://meta.discourse.org/t/carousel-sliders-with-featured-tiles-component-on-mobiles/282988.md?page=2)