Я создаю макет, в котором использую реакцию и библиотеку острого слайдера. Когда я помещаю острый ползунок в гибкий элемент div, острый слайдер подталкивает мой макет. Ниже мой код. Когда я удаляю минимальную ширину из заголовка, все работает нормально. Есть ли у кого-нибудь идеи, почему это может происходить?
const items = [...]; // 15 items
const ItemsSlider = () => {
const [loaded, setLoaded] = useState(false);
const sliderOptions = {
initial: 0,
slideChanged(slider) {
setCurrentSlide(slider.track.details.rel);
},
created() {
setLoaded(true);
},
renderMode: "performance",
slides: {
perView: "auto",
spacing: 4
}
};
const [sliderRef, instanceRef] = useKeenSlider(sliderOptions);
const [currentSlide, setCurrentSlide] = useState(0);
return (
Test Header
{items.map((i) => (
{i}
))}
);
};
export default PopularManufacturersSlider;
.App {
font-family: sans-serif;
text-align: center;
}
.item {
border: 1px solid #3a3a3a;
padding: 12px 16px;
border-radius: 4px;
width: auto !important;
white-space: nowrap;
}
.container {
display: flex;
}
.header {
min-width: 330px;
}
.slider {
position: relative;
}
Подробнее здесь: https://stackoverflow.com/questions/787 ... hes-layout
