부트스트랩 5: 슬라이더/캐러셀 제품

Question

Bootstrap5를 사용하여 다음 화면과 같이 슬라이더/캐러셀 제품을 만들려고 합니다.

여기에 붙여넣었습니다. 현재 코드는 다음과 같습니다.

으아아아 으아아아

하지만 현재로서는 상황이 좋지 않아 보입니다.

1개 항목만 표시되는데 이렇게 3개 반을 표시해야 합니다. 또한 사진 가격과 제품 제목 아래에 추가를 시도했는데 이미지가 반응해야 했습니다. 누구든지 이 코드를 수정하도록 도와줄 수 있나요?

Answer 1

이것을 검색한다면 이 Codepen과 이 Codeply를 찾을 수 있습니다.

두 가지를 결합하면 실제 예제(Codepen)가 제공됩니다.

JS는 각각을 복제하여 .carousel-item 的内容，因此每个 .carousel-item 将保存其 (5) 个同级的内容。 CSS 更改变换 슬라이더가 그에 따라 움직입니다.

반응형이며 최소 중단점까지만 항목을 표시하지만 쉽게 조정할 수 있습니다(CSS만 해당).

이것은 스니펫입니다. 전체 화면으로 보려면 "전체 페이지" 링크를 사용하세요:

참고: !importantCodepen과 같이 부트스트랩 이후에 CSS를 로드하는 경우에는 필요하지 않은 여러 개를 CSS에 추가해야 합니다.

으아아아 으아아아 으아아아