How to prevent react-carousel from adapting to image size?
Tags: needhelp, help, react
Published: 2019-11-03 10:08:40

---
title: How to prevent react-carousel from adapting to image size?
published: true
description: 
tags: #need-help #help #react
---

Demo of site: https://jozesuhadolnik.netlify.com/portreti

At the above page I'm using react-carousel to display images and give the user the ability to cycle through them. Every time there is a transition to the next image the entire container responds to the size of the image which causes this weird flickering. How can I force the container to be of a fixed size? I've tried changing every container style to no effect.

Site is made with GatsbyJS. Below are the files which are used for the Project page.

`project.js`
```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { graphql } from 'gatsby'
import styled from 'styled-components'

import { Layout, ProjectHeader, ProjectPagination, SEO, Gallery, SideBar } from '../components'
import config from '../../config/site'

const BG = styled.div`
  background-color: ${props => props.theme.colors.bg};
  position: relative;
`

const OuterWrapper = styled.div`
  padding: 0 ${props => props.theme.contentPadding};
  margin: -10rem auto 0 auto;
`

const InnerWrapper = styled.div`
  position: relative;
  max-width: ${props => `${props.theme.maxWidths.project}px`};
  margin: 0 auto;
`

const Project = ({ pageContext: { slug, prev, next }, data: { project: postNode, images } }) => {
  const project = postNode.frontmatter

  return (
    <Layout customSEO id="outer-container">
      <SideBar right outerContainerId="outer-container" />
      <SEO postPath={slug} postNode={postNode} postSEO />
      <ProjectHeader
        name={config.name}
        date={project.date}
        title={project.title}
        areas={project.areas}
        text={postNode.body}
      />
      <BG>
        <OuterWrapper>
          <InnerWrapper>
            <Gallery images={images.nodes} text={postNode.body} />
          </InnerWrapper>
          <ProjectPagination next={next} prev={prev} />
        </OuterWrapper>
      </BG>
    </Layout>
  )
}

export default Project

Project.propTypes = {
  pageContext: PropTypes.shape({
    slug: PropTypes.string.isRequired,
    next: PropTypes.object,
    prev: PropTypes.object,
  }),
  data: PropTypes.shape({
    project: PropTypes.object.isRequired,
    images: PropTypes.object.isRequired,
    allMdx: PropTypes.shape({
      nodes: PropTypes.array.isRequired,
    }),
  }).isRequired,
}

Project.defaultProps = {
  pageContext: PropTypes.shape({
    next: null,
    prev: null,
  }),
}

export const pageQuery = graphql`
  query($slug: String!, $absolutePathRegex: String!) {
    images: allFile(
      filter: {
        absolutePath: { regex: $absolutePathRegex }
        extension: { regex: "/(jpg)|(png)|(tif)|(tiff)|(webp)|(jpeg)/" }
      }
      sort: { fields: name, order: ASC }
    ) {
      nodes {
        name
        childImageSharp {
          fluid(maxWidth: 1600, quality: 90) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
    allMdx {
      nodes {
        fields {
          slug
        }
      }
    }
    project: mdx(fields: { slug: { eq: $slug } }) {
      body
      excerpt
      parent {
        ... on File {
          mtime
          birthtime
        }
      }
      frontmatter {
        cover {
          childImageSharp {
            resize(width: 800) {
              src
            }
          }
        }
        date(formatString: "DD.MM.YYYY")
        title
        areas
      }
    }
  }
`
```

`Gallery.js` carousel component:
```javascript
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { MDXRenderer } from 'gatsby-plugin-mdx'

import 'react-image-gallery/styles/css/image-gallery.css'
import ImageGallery from 'react-image-gallery'

const GalleryWrapper = styled.div`
  .image-gallery {
    max-width: 700px;
    max-height: 650px;
    margin: 3rem auto;
  }
  .image-gallery-image {
    text-align: center;
    background: #383838;
  }
`

const Text = styled.div`
  max-width: 450px;
  margin: 1rem auto;
  padding-top: 1rem;
  color: white;
`

const Gallery = ({ images, text }) => {
  const items = images.map(item => {
    return {
      original: item.childImageSharp.fluid.src,
      thumbnail: item.childImageSharp.fluid.src,
    }
  })
  return (
    <GalleryWrapper>
      {text && (
        <Text>
          <MDXRenderer>{text}</MDXRenderer>
        </Text>
      )}
      <ImageGallery items={items} />
    </GalleryWrapper>
  )
}

export default Gallery

Gallery.propTypes = {
  images: PropTypes.array.isRequired,
  text: PropTypes.string.isRequired,
}

```