pure-react-carousel: видны все слайды

#javascript #css #reactjs #pure-react-carousel

#javascript #css #reactjs #чистая реакция-карусель

Вопрос:

Резюме Я пытаюсь отобразить некоторые слайды, и контейнер, в котором существуют слайды, не скрывает неактивные слайды. В результате вы можете видеть все слайды, когда должен быть виден только один. Кроме того, слайды отображаются за пределами контейнера.

Попытки Я бы предпочел не создавать свой собственный компонент слайдов и пытаться заставить его работать, поскольку в этом смысл использования этой библиотеки. Я пробовал менять разные стили css, чтобы посмотреть, работает ли это, пытался изменить часть содержимого, но пока ничего не исправил.

Примечания Когда я помещаю компонент в storybook, проблема исчезает. Я не уверен, в чем разница, я передаю одни и те же реквизиты обоим.

Комментарии:

1. Я думаю, что проблема связана с react-carousel.es.css и конфигурацией webpack, которая у меня есть. Я еще не придумал, как решить проблему с загрузчиком, но если я это сделаю и это исправит проблему, я напишу свой собственный ответ.

2. К сожалению, ничего не найдено =(. Задается как в вопросах, так и в репо. Возможно, с моей текущей настройкой я не могу импортировать файлы css из node_modules. У меня не очень большой опыт работы с webpack.

Ответ №1:

Я нашел решение. Я изменил файл на файл scss в node_modules, создал файл scss в той же папке, что и мой компонент, и импортировал файл node_modules scss в новый файл scss.

Комментарии:

1. в конфигурации webpack я использую загрузчик стилей, загрузчик css и загрузчик sass

Ответ №2:

Проблема связана с react-carousel.es.css. По какой-то причине он либо не импортируется, либо не применяется. У меня была такая же проблема, когда я забыл ее импортировать