How to make a normal swipe carousel?

Question

css

Hello.

Sandbox here
I'm using react-responsive-carousel in a project.
When you click on the image, an automatic scroll occurs transform: translateX(-100%) i.e. full screen, not the width of that image.

After digging through the documentation , I did not find how to solve my problem.

Answer 1

In the example you have limited the width of the slides

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

if these restrictions are removed, and also remove margin-right: 20px !important; then everything works as it should