Right & Left Arrow disappear

[martellapetesso]

Hi everybody, i have an issue with the left and right arrows. With three images, I have the arrows in the centered image. With four images, it works perfect and with more than four images, the arrows are disappeared.

Code:

*.jsx

<div className="swipe-div">
                           <Coverflow width="500" height="300"
                                displayQuantityOfSide={2}
                                navigation
                                enableScroll={false}
                                infiniteScroll
                                active={0}>
                                <img src={images.about} />
                                <img src={images.bgBlog} />
                                <img src={images.home} />
                                <img src={images.bgBlog} />
                                <img src={images.bgBlog} />
                            </Coverflow>
                        </div>

*.scss

.swipe-div {
        max-width: 1000px;
        display: block;
        margin-left: auto;
        margin-right: auto;

        .coverflow__container__1P-xE {
            background: white !important;
        }
    }

4 Images:

5 Images:

[TheAksh]

+1

[asalem1]

@martellapetesso, thanks for bringing this to my attention. I'll try and get a PR up ASAP to fix this.

[PiyushVinayarajan]

Same here :(

[MonkeyDo]

Had the same issue, and I managed to change their placement with some CSS fuzzy matching:

div[class*="coverflow__left__"]{
    left:calc(50% - 300px) !important;
}
div[class*="coverflow__right__"]{
    right:calc(50% - 300px) !important;
}

Be aware that you might need to play with these values to suit your needs.