모바일의 사용자 정의 Bootstrap 5 캐러셀(여러 항목이지만 한 행에 있지 않음)

Question

모바일 기기에서 캐러셀 레이아웃을 맞춤설정하는 데 문제가 있습니다. 모바일에서는 캐러셀의 모든 항목을 표시하고 싶지만, 특히 display 또는 max-witdh 이것이 불가능하다고 생각하기 시작했거나 잘못된 위치/속성을 어디에서 보거나 봐야할지 모르겠습니다. 내가 달성하려는 것이 무엇인지 볼 수 있도록 두 장의 사진을 포함했습니다.

내가 이루고 싶은 것:

내가 가진 것:

샘플 HTML 코드는 매우 기본적입니다. 이는 단지 디자인 목적을 위한 것이므로 CSS를 포함하지 않습니다.

  
  텍스트


  
  텍스트


  
  텍스트


  
  텍스트


  img src="./img.png"alt=">
  텍스트


  <버튼 유형="버튼" data-bs-target="#solutions-carousel" 데이터-bs-슬라이드-to="0" 클래스="활성" 아리아-현재="true" aria-label="슬라이드 1">
  <버튼 유형="버튼" data-bs-target="#solutions-carousel" 데이터-bs-슬라이드-to="1" aria-label="슬라이드 2">
  <버튼 유형="버튼" data-bs-target="#solutions-carousel" 데이터-bs-슬라이드-to="2" aria-label="슬라이드 3">
  <버튼 유형="버튼" data-bs-target="#solutions-carousel" 데이터-bs-슬라이드-to="3" aria-label="슬라이드 3">
  <버튼 유형="버튼" data-bs-target="#solutions-carousel" 데이터-bs-슬라이드-to="4" aria-label="슬라이드 3">
 

Answer 1

이전에 비슷한 질문이나 사례에 대한 답변이 다른 스레드에서 있었던 것 같아요. 귀하에게 도움이 될 수 있는 몇 가지 참고 자료를 찾았으며 몇 가지 링크를 제공하겠습니다. 스택오버플로우의 또 다른 스레드

다음 JS 코드를 사용할 수도 있습니다:

으아악

면책 조항: 이 답변/코드 조각은 내 것이 아닙니다. 모리스 멜처스에게서 받았습니다 https://codepen.io/mephysto/pen/ZYVKRY