I was able to get Flickity working as expected. But for some reason when I made it to where the image sources are fetched from an external database, the images stopped loading properly and broke flickity.
render() {
const image_urls = this.state.image_urls.map(url => url) // These images urls were fetched using axios.
return(
<div className="featured-work" id="featured_work">
<div className="title"><div className="text">FEATURED WORK</div></div>
<div className="main-carousel" data-flickity='{ "wrapAround": true, "imagesLoaded": true, "groupCells": 1, "autoPlay": 7000 }'>
{
image_urls.map(url => {
return <div style={{backgroundImage: `url(${url})`, backgroundColor: 'orange', backgroundSize: 'contain', backgroundRepeat: 'no-repeat', height: '400px', width: '599px', marginLeft: '48px'}} />
})
}
</div>
<div className="button-container">
<form action={this.state.behance_link} target="_blank" rel="noopener noreferrer">
<button className="button button--pan"><span>VIEW FULL PORTFOLIO</span></button>
</form>
</div>
</div>
)
}
This is what the API call looks like for fetching the images urls/sources:
const google_sheet_id = "1dezRYzkCZ8VrfsbO2EKVoF9D_hIHsKAF_BuI7b83phA";
const selection_1 = "G5";
const selection_2 = "G21";
axios.get(`https://tofufx-backend.herokuapp.com/google_sheets/${selection_1}/${selection_2}/${google_sheet_id}?api_key=${process.env.REACT_APP_TOFU_BACKEND_API_KEY}`)
.then(response => {
const image_urls_unfiltered = response.data.values.map(row => {
return row[0]
})
const image_urls = image_urls_unfiltered.filter(url => {
return (typeof url === 'string');
})
this.setState({image_urls});
})
I tried to replace the images as divs with backgrounds which didn't fix the problem