React-Flickity -Component not setting common height across carousels and destroy not working on desktop

[chethanbr25]

I am using React-Flickity component and in mobile it works fine and in desktop it doesn't work and destroy not triggering And one more isssue is not able to set the maximum height of a cell across all other cells

import React, { Fragment, Component } from "react" import classNames from "classnames" import PropTypes from "prop-types" import Flickity from 'react-flickity-component'

//import GenericCarousal from "../Carousel/Carousel" import { getCard, getHeading, getRichText } from "../../helpers/uiHelper" import ProductCarouselCard from "../CardType/ProductCarouselCard" import AthleteCard from "../CardType/AthleteCard" import CarouselSetting from "./CarouselSetting"

import "flickity/css/flickity.css";

import cstyles from "../BrandCarousel/Carousel-tw-styles" import { getImageUrl, getSrcSet } from "../../adapters/cloudinary.adapters"

class Carousel extends Component { constructor(props) { super(props) this.state = { swiping: false } }

flkty = null; componentDidMount (){ const resize = this.flkty.resize this.flkty.resize = () => { this.flkty.element.classList.remove('flickity-resize') resize.call(this.flkty) this.flkty.element.classList.add('flickity-resize') } } componentDidUpdate() { if(this.flkty){ this.flkty.reloadCells() } }

componentWillUnmount() {
if (this.flkty) {
  this.flkty.destroy();
}

}; render() { const { carousel } = this.props const flickityOptions = { cellAlign: 'left', pageDots: false, selectedAttraction: 0.01, friction: 0.2, arrowShape: false, // watchCSS: true, //setGallerySize: false, } const carouselStyle = carousel.styles && carousel.styles.trim()

    return (
        <Fragment>
            <div
                className={classNames(
                    cstyles[carouselStyle] && cstyles[carouselStyle].heading
                )}
            >
                {carousel.titleCollection &&
                    carousel.titleCollection.items.map(title => {
                        switch (title.__typename) {
                        case "Heading":
                            return getHeading(title)
                        }
                    })}
            </div>
            <div
                className={classNames(
                    cstyles[carouselStyle] &&
                        cstyles[carouselStyle].carouselWrapper
                )}
            >
                    <Flickity className={"slider"} options = { flickityOptions }   flickityRef={c => this.flkty = c}>
                    {carousel &&
                        carousel.carouselPanelsCollection &&
                        carousel.carouselPanelsCollection.items.map(
                            (panel) => { 
                                switch (panel.__typename) {
                                case "Card":
                                    return getCard(panel)
                                case "Product":
                                    return (
                                        <ProductCarouselCard
                                            data={panel}
                                        />
                                    )
                                case "Campaign":
                                    return (
                                        <AthleteCard
                                            data={panel}
                                            classname={carousel.styles}
                                            quotesRequired={
                                                carousel.quotesRequired
                                            }
                                        />
                                    )
                                case "ContentTypeRichText":
                                    return getRichText(panel)
                                }
                            }
                        )}
                </Flickity>
                {carousel.background &&
                carousel.background.__typename == "Image" ? (
                        <img
                            src={getImageUrl(carousel.background.image.url)}
                            alt={carousel.background.altText}
                            title={carousel.background.tooltip}
                        />
                    ) : (
                        carousel.background && (
                            <picture>
                                <source
                                    src={getImageUrl(
                                        carousel.background.desktopImage.url
                                    )}
                                    srcSet={getSrcSet(
                                        carousel.background.desktopImage.url,
                                        768
                                    )}
                                    media='(min-width: 768px)'
                                />
                                <img
                                    src={getImageUrl(
                                        carousel.background.smartphoneImage.url
                                    )}
                                    alt={carousel.background.altText}
                                    title={carousel.background.tooltip}
                                />
                            </picture>
                        )
                    )}
            </div>
        </Fragment>
    )
}

} Carousel.propTypes = { carousel: PropTypes.oneOfType([PropTypes.object]).isRequired }

export default Carousel

[yaodingyd]

Please use https://codesandbox.io/ to create a sandbox.

[yaodingyd]

Will reopen with sandbox.