Я изо всех сил пытался сделать горизонтальный компонент прокрутки, который содержится в ширине экрана (что-то вроде этого: https://codeburst.io/how-to-create-hori ... 069651e9c6). Однако я не могу сделать его содержащимся на ширине экрана, и он переполняет экран. Я проверил все мои родительские элементы, установленные на ширину (100%). У меня также есть еще один элемент, который отлично работает, используя тот же подход (на той же странице). Может ли кто -нибудь помочь найти то, что я делаю не так? < /P>
Вот компонент: < /p>
{showLeftArrow && (
Scroll left
)}
{items.map((item) => (
))}
{showRightArrow && (
Scroll right
)}
< /code>
Все родительские компоненты до HTML и теги тела имеют добавленные классы ширины. Я также подумал, что, может быть, это связано с моими компонентами обучения, но проблема также, если я заполняю его пустым W-70 Div
У меня есть еще один очень похожий компонент, который не работает без проблем, что так и не переполняет ( на самом деле на той же странице, что и предыдущая): < /p>
Previous slide
{Array.from({ length: 5 }).map((_, index) => (
scrollToSlide(index)}
className={`h-2 w-2 rounded-full p-0 cursor-pointer transition-colors
${
activeIndex === index
? "bg-primary"
: "bg-muted hover:bg-muted-foreground/50"
}
focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2`}
type="button"
aria-label={`${index + 1} of 5`}
aria-disabled={false}
/>
))}
ref={slidesRef}
className="carousel__slides w-full flex overflow-auto snap-x snap-mandatory gap-5 scrollbar-none"
aria-atomic="false"
aria-live="off"
>
{Array.from({ length: 5 }).map((_, index) => (
))}
Next slide
Подробнее здесь: https://stackoverflow.com/questions/794 ... h-overflow
