Dennis_P_Z
(Dennis P. Z)
1
サイトのホームページとカテゴリページの上部にカルーセルスライダーを設置したいと考えています。設定パネルから注目のトピックや画像を選択・指定できるようにしたいです。
以前は、デスクトップとモバイルデバイスの両方で以下の効果を求めていました:point_down:
これはヒントになりますが、作業はまだ進行中です
そこで、@Moin のアドバイスを受けて Featured Tiles コンポーネントを試しました。しかし、カルーセル効果がなく、モバイルフレンドリーではありませんでした。これを実現するためにいくつか作業を行いました:point_down:
デスクトップ
モバイル
しかし、モバイル側には2つの問題があります。
-
トピックページからホームページに移動すると、カルーセル効果が失敗します。ホームボタンを再度クリックするまで、javascriptがロードされていないようです。
-
Uncaught TypeError が発生します。
使用しているJavascriptは次のとおりです: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;
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 何か解決策やアイデアはありますか？
「いいね！」 1
Lilly
(Lillian Louis)
2
Hi @Dennis_P_Z 
このコンポーネントでご希望のことを実現できると思います。
「いいね！」 1
Moin
5
これらの中から、代替となるコンポーネントがあるかもしれません。トピックを一番上に配置することはできますが、カルーセルはありません。
「いいね！」 1
Dennis_P_Z
(Dennis P. Z)
6
@Moinさん、アドバイスありがとうございます。カルーセルが実現可能かどうか試してみますね😉
試しに好奇心で試してみました。コンポーネントは正常に動作します。
少なくとも2つの画像が必要で、なぜか /categories ルートに制限されています。
.
「いいね！」 2
Lilly
(Lillian Louis)
8
いいね！ 
テストしていません。OPから推測しただけで、作業中であり、gitリポジトリにメタトピック情報がないため、機能していないと判断しました。
あと、クールなコンポーネントですね。
「いいね！」 1
Dennis_P_Z
(Dennis P. Z)
9
@Moin Featured Filesで試しましたが、カスタムCSSとJavaScriptを使用して最終的にカルーセルを実現しました。ただし、モバイルフレンドリーにするためには追加のCSSが必要です:joy:
「いいね！」 3
Moin
10
最後に Theme component を共有することを忘れないでください
「いいね！」 3
Dennis_P_Z
(Dennis P. Z)
11
Hi @Arkshine
ホームページとカテゴリページでこの機能が必要で、さらにトピック内で画像を呼び出せると良いでしょう。著者に時間をかけます 
元のトピックを更新しましたので、確認していただき、何かアイデアがあれば教えてください。
よろしくお願いします！
@Lilly @Moin
「いいね！」 1
merefield
(Robert)
12
その切り抜きはひどいですね 
子犬の目はどこに？！ 
理想的には、アスペクト比を維持すべきです。
高さを維持しつつ、画像を水平方向に中央揃えすることをお勧めします。
「いいね！」 1
Dennis_P_Z
(Dennis P. Z)
13
True, it’s always an issue of choice in small screens, distorted images are not okay 
「いいね！」 1
もしこのコンポーネントを試したいのであれば、show_on という設定を追加するためにフォークしました。これにより、どこに表示するかを選択できます。
URL: https://github.com/Arkshine/discourse-big-carousel-component
ブランチ名: feature/new_settings
（元のコンポーネントの状況がわかりません。フォークしても大丈夫か心配です 
そして、彼らに変更を提案すべきかどうかもわかりません）。
「いいね！」 4
Dennis_P_Z
(Dennis P. Z)
16
ありがとうございます。正直なところ、それはコンポーネントとそのユーザーにとって非常に役立つでしょう。
「いいね！」 1
Aizada_M
(Aizada M)
17
こんにちは！素晴らしい出来栄えです
昨日、このテーマコンポーネントをインストールしましたが、すべて正常に動作しています。ただし、以下の点を除きます。
-
カルーセルをスクロールすると、ある時点で画像が2つに分割されますが、これは常に発生するわけではありません。例を挙げます。
-
カルーセルのボタンをクリックして別のページに移動し、ホームページに戻ると、バナーのコンテンツが縮小します。これは恒久的なエラーではなく、いつでも発生する可能性があります。エラーの例を挙げます。
参考情報です。デスクトップではChromeブラウザを使用し、AndroidスマートフォンではHuaweiブラウザを使用しました。
もちろん、このコンポーネントはまだ開発中であることは理解していますが、それでも情報共有をすることにしました。
デフォルトでは、画像は利用可能なスペースに基づいて繰り返されます。この動作は、一部のCSSで変更できます。画像の制御、例えば位置やサイズなどを設定できるようにします。
現在、background プロパティを調整できます。（!important が必要です）
.custom-big-carousel-slide {
background-repeat: no-repeat !important;
}
- 再現できません。
ただし、コンソールで一度エラーを確認しました（再度確認できません）。関連があるかもしれません。確認します！
「いいね！」 2
Aizada_M
(Aizada M)
19
こんにちは！
アドバイスありがとうございます:raised_hands:、CSSバージョンを試してみます。うまくいけばいいのですが:slightly_smiling_face:
Aizada_M
(Aizada M)
20
こんにちは、またお会いできて嬉しいです
CSSを試してみて、カルーセル内の画像の背景を制御できるのが気に入りました 。CSSで元の問題も解決できることを願っていました。通常の状態でカルーセル内の画像は問題なく切り替わりますが、latest、new、またはactiveボタンのいずれかをクリックすると、カルーセル内の画像とコンテンツが切り替わる際に、その整合性が損なわれます。つまり、始まりが終わりに来て、終わりが最初に来てしまいます。これはシステムのバグのようです 
フィードバックありがとうございます。後で試してみます。
「いいね！」 1
