Слайдеры карусели с компонентом Featured Tiles на мобильных устройствах?

[Dennis_P_Z]

Я хочу добавить карусельный слайдер на главную страницу моего сайта и на страницы категорий. Некоторые рекомендуемые темы и изображения можно выбирать и назначать через панель настроек.

Ранее я планировал реализовать следующий эффект как на настольных устройствах, так и на мобильных:

Этот пример дает подсказку, но работа еще продолжается:

GitHub - discourse/discourse-big-carousel-component: Work in progress

Поэтому я последовал совету @Moin и попробовал компонент Featured Tiles. Однако в нем отсутствует эффект карусели, и он не удобен для мобильных устройств. Я проделал некоторую работу, чтобы добиться этого:

Настольные устройства

Мобильные устройства

Однако на мобильных устройствах есть две проблемы:

1. При переходе на главную страницу со страницы темы эффект карусели не работает, пока я снова не нажму кнопку «Главная». Похоже, что JavaScript не загружается.

2. Возникает ошибка Uncaught 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, есть ли какие-либо решения или идеи?

[Lilly (Lillian)]

Привет, @Dennis_P_Z

Думаю, вы сможете добиться желаемого с помощью этого компонента:

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]

Спасибо, но это другое.

[Lilly (Lillian)]

@Dennis P. Z

Затем я получил этот компонент, но он ничего не показывает …

GitHub - discourse/discourse-big-carousel-component: Work in progress · GitHub

В ссылке указано, что работа продолжается.

[Moin]

Возможно, один из этих компонентов является альтернативой. Вы можете разместить темы в верхней части, но карусели нет.

• Homepage Feature
• Featured Topics
• Featured Tiles

[Dennis_P_Z]

Привет, @Moin, спасибо за совет. Попробую, получится ли у меня реализовать карусель

[Arkshine]

Только что протестировал из любопытства. Компонент работает отлично.
Нужно как минимум 2 изображения, и по какой-то причине оно ограничено маршрутом /categories.

.

[Lilly (Lillian)]

Ха, здорово! Я не проверял. Я просто предположил на основе сообщения автора и того, что там было указано «в процессе разработки», а в репозитории Git не было информации на тему мета-данных, что это не работает.

К тому же, классный компонент.

[Dennis_P_Z]

@Moin Я пробовал с использованием «Избранных файлов», в итоге удалось реализовать карусель с помощью пользовательских CSS и JavaScript, но для корректного отображения на мобильных устройствах нужно добавить ещё немного CSS

[Moin]

Не забудьте поделиться своим #theme-component в конце

[Dennis_P_Z]

Привет @Arkshine
Мне нужна эта функция на главной странице и на страницах категорий, а ещё лучше, если изображение можно будет вызывать внутри темы. Мы дадим автору больше времени

Я обновил свою исходную тему, пожалуйста, посмотрите, и если у вас есть идеи
Спасибо!
@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)]

Обрезка выглядит довольно плохо Где глаза щенка?!

В идеале следует сохранять соотношение сторон.

Рекомендую сохранить высоту и центрировать изображение по горизонтали.

[Dennis_P_Z]

Верно, на маленьких экранах всегда стоит вопрос выбора, но искажённые изображения — это недопустимо

[Arkshine]

@Dennis P. Z

Мне нужна эта функция на главной странице и на страницах категорий, а ещё лучше, если изображение можно будет вызывать внутри темы. Мы дадим автору больше времени.

Если вы всё ещё хотите попробовать этот компонент, я сделал форк, добавив настройку show_on, где можно выбрать место для его отображения.

URL: https://github.com/Arkshine/discourse-big-carousel-component
Имя ветки: feature/new_settings

(Я не знаю, какой сейчас статус у оригинального компонента. Надеюсь, что форкнуть его нормально , и не уверен, стоит ли предлагать им эти изменения).

[Dennis_P_Z]

@Arkshine

Если вы всё ещё хотите попробовать этот компонент, я сделал форк, чтобы добавить настройку show_on, где можно выбрать место для его отображения.

Спасибо. Честно говоря, это было бы очень полезно для компонента и его пользователей.

[Aizada_M]

Привет! Отличная работа
Вчера я установил этот компонент темы, всё работает хорошо, за исключением:

1. При прокрутке карусели в какой-то момент изображение разделяется на две части, но это происходит не всегда. Вот пример:
   

2. После нажатия на кнопку в карусели я перехожу по ссылке на другую страницу, а затем возвращаюсь на главную. При этом размер контента в баннере уменьшается. Это не постоянная ошибка и может возникнуть в любой момент. Вот пример ошибки:
   

Для справки: на компьютере я использовал браузер Chrome, а на смартфоне Android — браузер Huawei.

Конечно, я понимаю, что этот компонент всё ещё находится в разработке, но всё же решил поделиться этой информацией с вами.

[Arkshine]

По умолчанию изображение повторяется в зависимости от доступного пространства. Вы можете изменить это поведение с помощью CSS. Я добавлю настройку для управления изображением, например, его позицией, размером и т. д.

На данный момент вы можете поэкспериментировать со свойствами: background. (Требуется !important)

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

2. Мне не удалось воспроизвести эту проблему. Однако один раз я видел ошибку в консоли (сейчас её не вижу); возможно, она связана с этим. Разберёмся!

[Aizada_M]

Привет!
Спасибо за совет , я попробую вашу версию CSS, надеюсь, она поможет

[Aizada_M]

Снова здравствуйте
Я поэкспериментировал с CSS и мне понравилась возможность контролировать фон изображения в карусели . Я также надеялся, что CSS решит мою первоначальную проблему. В обычном состоянии изображения в карусели меняются без проблем, но как только я нажимаю на одну из кнопок latest, new или active, при смене изображений и контента в карусели нарушается их целостность — начало появляется в конце, а конец — в начале. Похоже, это системная ошибка

[Arkshine]

Спасибо за обратную связь, я попробую это сделать позже.