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
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:
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,
}
Top comments (0)