사이트의 홈 페이지와 카테고리 페이지 상단에 캐러셀 슬라이더를 추가하고 싶어요. 설정 패널을 통해 특정 주제와 이미지를 선택하여 지정할 수 있습니다.
이전에는 데스크톱과 모바일 기기 모두에서 다음과 같은 효과를 원했습니다
이것은 힌트가 되지만 작업은 아직 진행 중입니다.
Work in progress
그래서 @Moin의 조언을 받아 Featured Tiles 컴포넌트를 사용해 보았습니다. 하지만 캐러셀 효과가 없고 모바일 친화적이지도 않습니다. 이 효과를 구현하기 위해 몇 가지 작업을 수행했습니다
데스크톱
모바일
하지만 모바일 환경에서 두 가지 문제가 있습니다.
주제 페이지에서 홈 페이지로 이동할 때 캐러셀 효과가 작동하지 않습니다. 홈 버튼을 다시 클릭해야만 작동하는데, 자바스크립트가 로드되지 않은 것 같습니다.
Uncaught TypeError가 발생합니다.
사용 중인 자바스크립트 코드
<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
10월 21, 2023, 5:01오후
2
안녕하세요 @Dennis_P_Z
이 컴포넌트를 사용하면 원하는 것을 달성할 수 있을 것 같습니다:
Moin
10월 21, 2023, 6:23오후
5
이 중 일부 구성 요소가 대안이 될 수 있습니다. 토픽을 상단에 배치할 수는 있지만 캐러셀은 없습니다.
안녕하세요 @Moin 조언해 주셔서 감사합니다. 캐러셀이 가능한지 시도해 보겠습니다
궁금해서 테스트해 봤는데, 컴포넌트는 정상적으로 작동합니다./categories 라우트로만 제한되어 있습니다.
Lilly
10월 21, 2023, 7:30오후
8
하, 잘했네!
또, 멋진 컴포넌트네.
@Moin Featured Files로 시도해 보았고, 마침내 커스텀 CSS와 JavaScript를 사용하여 캐러셀을 구현했습니다. 하지만 모바일에서도 잘 보이려면 추가적인 CSS가 필요합니다
Moin
10월 21, 2023, 8:48오후
10
안녕하세요 @Arkshine
원본 토픽을 업데이트했으니 확인해 주시고, 혹시 아이디어가 있으시면 알려주세요.@Lilly @Moin
사이트의 홈 페이지와 카테고리 페이지 상단에 캐러셀 슬라이더를 추가하고 싶어요. 설정 패널을 통해 특정 주제와 이미지를 선택하여 지정할 수 있습니다.
이전에는 데스크톱과 모바일 기기 모두에서 다음과 같은 효과를 원했습니다 [carousel-cover-1200x900]
이것은 힌트가 되지만 작업은 아직 진행 중입니다.
그래서 @Moin의 조언을 받아 Featured Tiles 컴포넌트를 사용해 보았습니다. 하지만 캐러셀 효과가 없고 모바일 친화적이지도 않습니다. 이 효과를 구현하기 위해 몇 가지 작업을 수행했습니다 [ima…
그것의 크롭이 꽤나 엉망인 것 같습니다
이상적으로는 종횡비를 유지해야 합니다.
높이를 유지하면서 이미지를 수평으로 중앙 정렬하는 것을 제안합니다.
맞아요, 작은 화면에서는 항상 선택의 문제예요. 왜곡된 이미지는 안 되죠
이 컴포넌트를 시도해 보고 싶으시다면, 표시 위치를 선택할 수 있는 show_on 설정을 추가하기 위해 포크 했습니다.
URL: https://github.com/Arkshine/discourse-big-carousel-componentfeature/new_settings
(원본 컴포넌트의 상태가 어떻게 되는지 모르겠고, 포크하는 것이 괜찮을지 ).
감사합니다. 솔직히 이 컴포넌트와 그 사용자들에게 매우 도움이 될 것 같습니다.
Aizada_M
11월 1, 2023, 1:57오후
17
안녕하세요! 정말 잘 만드셨네요
캐러셀을 스크롤하면 특정 시점에 이미지가 둘로 나뉘는 현상이 발생하지만, 항상 그런 것은 아닙니다. 예시는 다음과 같습니다:
캐러셀의 버튼을 클릭하여 다른 페이지로 이동한 뒤 홈 페이지로 돌아오면 배너의 콘텐츠 크기가 줄어듭니다. 이는 영구적인 오류가 아니며 언제든 발생할 수 있습니다. 오류 예시는 다음과 같습니다:
참고로 데스크톱에서는 Chrome 브라우저를, Android 스마트폰에서는 Huawei 브라우저를 사용했습니다.
물론 이 컴포넌트가 아직 개발 중이라는 점은 잘 알고 있지만, 그래도 정보를 공유해 드리고자 합니다.
기본적으로 이미지는 사용 가능한 공간에 따라 반복됩니다. 이 동작은 CSS를 통해 변경할 수 있습니다. 이미지 위치, 크기 등을 제어할 수 있도록 설정을 추가할 예정입니다.
현재는 background!important 필요)
.custom-big-carousel-slide {
background-repeat: no-repeat !important;
}
재현이 불가능합니다.
Aizada_M
11월 8, 2023, 2:46오후
19
Aizada_M
11월 9, 2023, 4:54오후
20
다시 인사드립니다 latest, new 또는 active 버튼 중 하나를 클릭하여 캐러셀의 이미지와 콘텐츠를 변경할 때 그 일관성이 깨집니다 - 시작 부분이 끝에 나타나고, 끝 부분이 맨 앞에 나타납니다. 아마도 이는 시스템 오류인 것 같습니다
피드백 감사합니다. 나중에 한번 시도해 보겠습니다.
테스트는 안 해봤어. OP에서 그렇게 나와서, 그리고 작업 중이라는 표시가 있고 git 저장소에 메타 토픽 정보가 없어서 작동하지 않는다고 가정했거든. 
강아지 눈은 어디에 있나요?! 
그리고 변경 사항을 제안해야 할지 확신이 서지 않습니다).
단, 콘솔에서 한 번만 에러를 확인했습니다(다시 확인은 불가); 관련이 있을 수도 있습니다. 확인해 보겠습니다!
, CSS 버전을 시도해 볼게요. 도움이 되길 바랍니다 
