Carousel sliders with Featured Tiles component on mobiles?

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 achieve this :point_down:



However there are two issues on mobile end,

  1. When I go to homepage from topic page, the carousel effect fails, unless I click home button again, seems that javascript not loaded

  2. Uncaught TypeError occurs

Javascript I’m using :point_down:

<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; = "transform 0.5s ease-in-out"; = `translateX(${offset}px)`;

      setTimeout(() => {
        canSlide = true; = "none";
      }, 500);

  function startSlideshow() {
    slideshowInterval = setInterval(slideLeft, 3000);


function destroySlideshow() {

api.onPageChange((url) => {
  if (url === "/" || url.indexOf("/c/") === 0) {


@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:

1 Like

Thank you but it’s different

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.

1 Like

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:


1 Like

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:

1 Like

@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:



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
@Lilly @Moin

1 Like

The cropping on that looks pretty bad :frowning: Where are the puppy’s eyes?! :cry:

Ideally, aspect ratio should be maintained.

Suggest you maintain the height whilst centering the image horizontally.

1 Like

True, it’s always an issue of choice in small screens, distorted images are not okay :rofl:

1 Like

If you still want to give a try this component, I forked it to add a show_on setting where you can choose where to display it.

Branch name: feature/new_settings

(I don’t know what is the status of the original component, I hope it’s okay to fork it :pray: and I’m not sure if I should propose them the changes).


Thanks. Honestly that would be very helpful to the component and its users.

1 Like

Hello! Wonderful job :+1:
Yesterday I installed this theme component, everything works well except:

  1. When I scroll through the carousel, at some point the image splits into two, but this is not always the case. Here’s an example:

  2. After I click on the button in the carousel, I follow the link to another page and after returning back to the home page, the content in the banner decreases in size. This is not a permanent error and can occur at any time. Here is an example of the error:

For information. On the desktop I used the Chrome browser, and on the Android smartphone I used the Huawey browser

Of course, I understand that this component is still in development, but I decided to share the information with you anyway.

By default, the image repeats itself based on the available space. You can change this behavior with some CSS. I will make a setting to control the image, e.g., its position, size, and so on.

At the moment, you can play with the: background properties. (!important is needed)

.custom-big-carousel-slide {
    background-repeat: no-repeat !important;
  1. I’m unable to reproduce it. :thinking: However, I could see an error in the console one time (can’t see it again); maybe it’s related. Will see!

Hello! :raising_hand_man:
Thanks for the tip :raised_hands:, I’ll try to try your CSS version, I hope it helps :slightly_smiling_face:

Hello again :wave:
I played around with CSS and liked the ability to control the background of the image in the carousel :ok_hand: . I was also hoping that CSS would solve my original problem. In the normal state, the images in the carousel change without problems, but as soon as I click on one of the latest, new or active buttons, when changing images and content in the carousel, their integrity is violated - the beginning appears at the end, and the end appears at first. Apparently this is a system error :pensive:

Thanks for the feedback; I will give it a try later. :+1:

1 Like