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: [carousel-cover-1200x900] This one gives a hint but the work is still in progress https://github.com/discourse/discourse-big-carousel-component 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 achieve this :point_down: Desktop Mobile However there are two issues on mobile end, When I go to homepage from topic page, the carousel effect fails, unless I click home button again, seems that javascript not loaded Uncaught TypeError occurs [image] Javascript I’m using :point_down: 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(); } }); } @Arkshine @Lilly Any solutions or ideas?

Hi @Dennis_P_Z :wave: I believe you may be able to achieve what you want with this component: [图片] Topic List Previews (TLP) Theme component This is a Theme Component but has the option to add a complementary plugin. information_source Summary 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_wrench Repository Link GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists open_book Install Guide Installing a theme or theme component …

[图片] Dennis P. Z: Then I got this component but it doesn’t show anything … GitHub - discourse/discourse-big-carousel-component: Work in progress · GitHub It says work in progress on the link.

Maybe one of these components is an alternative. You can put topics at the top but there is no carousel. Homepage Feature Featured Topics Featured Tiles

Hi @Moin Thanks for advice. I will try if I can make carousel possible :wink:

Just tested it out of curiosity. The component works fine. You need at least 2 images, and it’s restricted to /categories route for some reason. :slight_smile: [chrome_LYxltGVnmc] .

hah nice! :ok_hand: I didn’t test. I just assumed from the OP and that because it said work in progress and there was no meta topic info on the git repo that it wasn’t working. :woman_shrugging:t2: Also, cool component. :slight_smile:

@Moin I tried with Featured Files, finally achieved carousel using custom css and javascript, but extra css need to be added so to be friendly on mobiles :joy: [mmexport1697920795005]

:+1: Don’t forget to share your #theme-component at the end

Hi @Arkshine I need the feature on homepage and category pages, better the image can be recalled within the topic. We will give more time to the author :yum: I updated my original topic, please have a look and if you have any ideas Bless! @Lilly @Moin [图片] Carousel sliders with Featured Tiles component on mobiles? Development 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 [carousel-cover-1200x900] 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…

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

开发

Moin 2023 年10 月 21 日 18:23 5

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

Homepage Feature
Featured Topics
Featured Tiles

话题		回复	浏览量
Featured Tiles Theme component official , featured-tiles	45	14336	2026 年1 月 22 日
Homepage Feature Theme component official , homepage-feature	136	27539	2026 年7 月 9 日
Topic List Previews (TLP) Theme component	749	45228	2026 年8 月 31 日
Featured Topics Theme component	72	8783	2026 年10 月 29 日
Topic List Thumbnails Theme component official , topic-list-thumbnails	161	38584	2026 年11 月 5 日

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

相关话题