Carousel sliders with Featured Tiles component on mobiles?

[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

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

Desktop

Mobile

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

<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 Any solutions or ideas?

[Lilly (Lillian)]

Hi @Dennis_P_Z

I believe you may be able to achieve what you want with this component:

Topic List Previews (TLP)

This is a Theme Component but has the option to add a complementary plugin. 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. Repository Link GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists Install Guide Installing a theme or theme component …

[Dennis_P_Z]

Thank you but it’s different

[Lilly (Lillian)]

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

[Moin]

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

[Dennis_P_Z]

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

[Arkshine]

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.

.

[Lilly (Lillian)]

hah nice! 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.

Also, cool component.

[Dennis_P_Z]

@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

[Moin]

Don’t forget to share your Customization > Theme component at the end

[Dennis_P_Z]

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

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?

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 [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…

[merefield (Robert)]

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

Ideally, aspect ratio should be maintained.

Suggest you maintain the height whilst centering the image horizontally.

[Dennis_P_Z]

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

[Arkshine]

@Dennis_P_Z

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

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.

URL: https://github.com/Arkshine/discourse-big-carousel-component
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 and I’m not sure if I should propose them the changes).

[Dennis_P_Z]

@Arkshine

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.

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

[Aizada_M]

Hello! Wonderful job
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.

[Arkshine]

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;
}

2. I’m unable to reproduce it. However, I could see an error in the console one time (can’t see it again); maybe it’s related. Will see!

[Aizada_M]

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

[Aizada_M]

Hello again
I played around with CSS and liked the ability to control the background of the image in the carousel . 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

[Arkshine]

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