Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

In autoplay mode, the speed of sliding is irregular #403

Open
ankitjangir01 opened this issue Aug 23, 2023 · 0 comments
Open

In autoplay mode, the speed of sliding is irregular #403

ankitjangir01 opened this issue Aug 23, 2023 · 0 comments

Comments

@ankitjangir01
Copy link

Describe the bug
I was using autoPlay mode of the slides and changed the customTransition as all 10s linear. There carousel was sliding automatically as expected but with irregular speed. Firstly, it slides gently and till the end, the speed gradually increases.

Full Code

import React from 'react'
import Carousel from 'react-multi-carousel'
import "react-multi-carousel/lib/styles.css"

const SkillsCarousel = () => {
    return (
        <Carousel
            additionalTransfrom={0}
            arrows
            autoPlay
            autoPlaySpeed={1}
            centerMode={false}
            className=""
            containerClass="container-with-dots"
            customTransition="all 10s linear"
            dotListClass=""
            draggable
            focusOnSelect={false}
            infinite
            itemClass=""
            keyBoardControl
            minimumTouchDrag={80}
            pauseOnHover
            renderArrowsWhenDisabled={false}
            renderButtonGroupOutside={false}
            renderDotsOutside={false}
            responsive={{
                desktop: {
                    breakpoint: {
                        max: 3000,
                        min: 1024
                    },
                    items: 3,
                    partialVisibilityGutter: 40
                },
                mobile: {
                    breakpoint: {
                        max: 464,
                        min: 0
                    },
                    items: 1,
                    partialVisibilityGutter: 30
                },
                tablet: {
                    breakpoint: {
                        max: 1024,
                        min: 464
                    },
                    items: 2,
                    partialVisibilityGutter: 30
                }
            }}
            rewind={false}
            rewindWithAnimation={false}
            rtl={false}
            shouldResetAutoplay
            showDots={false}
            sliderClass=""
            slidesToSlide={2}
            swipeable
            transitionDuration={1000}
        >
            <div>
                <h1>First heading</h1>
            </div>
            <div>
                <h1>Second heading</h1>
            </div>
            <div>
                <h1>Third heading</h1>
            </div>
            <div>
                <h1>Fourth heading</h1>
            </div>
            <div>
                <h1>Fifth heading</h1>
            </div>
        </Carousel>
    )
}

export default SkillsCarousel

Suspicious Code
In the styles.css file, my IDE is highlighting a part of the code in red color. I'm not sure whether it is related to the issue or not, even whether it is a bug or not, but perhaps, it is something to be considered by you.

See background in following class-
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant