Как сделать нормальный свайп карусели?

Question

[dpdesigner]

Здравствуйте.

Песочница тут
Использую react-responsive-carousel в проекте.
При клике по изображению происходит автоматический скролл transform: translateX(-100%) т.е. на целый экран, а не на ширину этого изображения.

Покопавшись в документиции, я так и не нашел как можно решить мою проблему.

Answer 1

[Eduard Shkuta]

В примере Вы ограничили ширину слайдов

.expertiseCarousel li {
    border-radius: 4px !important;
    >> min-width: 140px !important;
    >> width: 20%;
    margin: 0 !important;
    margin-right: 20px !important;
}

если эти ограничения убрать, а так-же убрать margin-right: 20px !important; то всё работает как нужно

Comments

[dpdesigner]

Даже убрав эти стили, попробуйте кликнуть например по 2 изображению. слайдер переместиться на пустой екран