Блог

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

Заранее спасибо.

Мой код для компонента карусели приведен ниже:

 render() {

    // slider settings
    const centerAlignedCarouselSettings = {
        focusOnSelect: true,
        className: "center-carousel",
        centerMode: true,
        centerPadding: "60px",
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        speed: 2000,
        cssEase: "linear",
        arrows: false,

    };

    const leftAlignedCarouselSettings = {
        className: "left-carousel",
        dots: false,
        infinite: true,
        adaptiveHeight: true,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 1,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                    initialSlide: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    };

    const CenterCarousel = () => {
        return (
            <Slider {...centerAlignedCarouselSettings}>
                {
                    this.props.carouselData.map((item, index) => {
                        return (
                            <div className="carousel-card center">
                                <div className="carousel-image">
                                    <img src={item.image} alt={`${item.place}`} />
                                </div>
                                <div className="carousel-text">
                                    <p className="days">
                                        DAY {item.days}
                                    </p>
                                    <p className="place">
                                        {item.place}
                                    </p>
                                    <p className="description">
                                        {item.description}
                                    </p>
                                </div>
                            </div>
                        )
                    })
                }
            </Slider>
        )
    }

    const LeftCarousel = () => {
        return (
            <Slider {...leftAlignedCarouselSettings}>
                {
                    this.props.carouselData.map((item, index) => {
                        return (
                            <div className="carousel-card">
                                <div className="wrapper left">
                                    <div className="carousel-image">
                                        <img src={item.image} alt={`${item.place}`} />
                                    </div>
                                    <div className="carousel-text">
                                        <p className="days">
                                            {item.number}
                                        </p>
                                        <p className="description">
                                            {item.description}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </Slider>
        )
    }

    return (
        <div className="carousel-wrapper" >
            {this.props.leftAligned ? <LeftCarousel /> : <CenterCarousel />}
        </div>
    );
}
 

ОБНОВЛЕНИЕ 15.09.21

Я обнаружил, что компонент, похоже, перерисовывается только тогда, когда я использую функцию afterChange обратного вызова на карусели. Ссылка на документацию