Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Blank space

See original GitHub issue

Hello! Thank you for the awesome library.

Can you try to help me and tell me why am I getting tons of blank space before and after the slides?

Screenshot 2020-08-18 at 12 41 17

Sandbox - https://codesandbox.io/s/embla-carousel-react-styled-components-forked-9eibz?file=/src/js/components/EmblaCarousel.js

import React, { useCallback, useEffect, cloneElement } from 'react'
import styled from 'styled-components'
import { useEmblaCarousel } from 'embla-carousel/react'
import { CarouselHeader } from './CarouselHeader'

const Carousel = () => {
  const [EmblaCarouselReact, embla] = useEmblaCarousel()

  const onSelect = useCallback(() => {
    if (!embla) return
  }, [embla])

  useEffect(() => {
    if (!embla) return
    embla.on('select', onSelect)
    onSelect()
  }, [embla, onSelect])
  return (
    <>
      <CarouselHeader>Gear up</CarouselHeader>
      <CarouselContentContainer>
        <CarouselContentWrapper>
          <Container>
            <EmblaCarouselReact>
              <Wrapper>
                <SlideContainer>
                  <Image src="https://static.nike.com/a/images/f_auto/q_auto:eco/t_PDP_864_v1/e35da960-df24-45f5-9343-3639e48c3095/tempo-high-cut-running-shorts-F8N65D.jpg" />
                </SlideContainer>
                <SlideContainer>
                  <Image src="https://static.nike.com/a/images/f_auto/q_auto:eco/t_PDP_864_v1/e35da960-df24-45f5-9343-3639e48c3095/tempo-high-cut-running-shorts-F8N65D.jpg" />
                </SlideContainer>
                <SlideContainer>
                  <Image src="https://static.nike.com/a/images/f_auto/q_auto:eco/t_PDP_864_v1/e35da960-df24-45f5-9343-3639e48c3095/tempo-high-cut-running-shorts-F8N65D.jpg" />
                </SlideContainer>
                <SlideContainer>
                  <Image src="https://static.nike.com/a/images/f_auto/q_auto:eco/t_PDP_864_v1/e35da960-df24-45f5-9343-3639e48c3095/tempo-high-cut-running-shorts-F8N65D.jpg" />
                </SlideContainer>
                <SlideContainer>
                  <Image src="https://static.nike.com/a/images/f_auto/q_auto:eco/t_PDP_864_v1/e35da960-df24-45f5-9343-3639e48c3095/tempo-high-cut-running-shorts-F8N65D.jpg" />
                </SlideContainer>
                <SlideContainer>
                  <Image src="https://static.nike.com/a/images/f_auto/q_auto:eco/t_PDP_864_v1/e35da960-df24-45f5-9343-3639e48c3095/tempo-high-cut-running-shorts-F8N65D.jpg" />
                </SlideContainer>
              </Wrapper>
            </EmblaCarouselReact>
          </Container>
        </CarouselContentWrapper>
      </CarouselContentContainer>
    </>
  )
}

const CarouselContentContainer = styled.figure`
  @media screen and (min-width: 1920px) {
    margin-left: auto;
    margin-right: auto;
  }
  display: block;
`

const CarouselContentWrapper = styled.div`
  @media screen and (min-width: 1920px) {
    margin: 0 auto;
    max-width: 1792px;
  }
`

const Container = styled.div`
  overflow: hidden;
  position: relative;
`

const Wrapper = styled.div`
  margin-left: -1rem;
  display: flex;
`

const SlideContainer = styled.div`
  flex: 0 0 auto;
  height: 100%;
  position: relative;
  width: 300px;
  padding-left: 1rem;

  @media only screen and (min-width: 640px) {
    margin-right: 16px;
    width: 330px;
  }

  @media only screen and (min-width: 1024px) {
    width: calc((100vw - 144px) / 3);
    max-width: 586px;
  }

  @media (min-width: 1920px) {
    width: 33%;
  }
`

const Image = styled.img`
  max-width: 100%;
  cursor: pointer;
`

export { Carousel }

Issue Analytics

State:
Created 3 years ago
Comments:13 (8 by maintainers)

Top GitHub Comments

12reactions

davidjerlekecommented, Aug 18, 2020

Hello Todor @todortotev,

Thank you. By default the carousel option is align: "center". If you want to remove trailing and leading white space, add containScroll: "trimSnaps" to the carousel options like so:

const [EmblaCarouselReact, embla] = useEmblaCarousel({
  containScroll: "trimSnaps"
})

Let me know if it helps!

Kindly, David

4reactions

davidjerlekecommented, Aug 20, 2020

I’m glad to be able to help! Don’t hesitate to ask more questions if you need more assistance 👍.

Massive thanks for taking the time to share your thoughts and ideas @todortotev! I will do my best following your guidelines and I’m hoping that this will increase the traction to Embla Carousel. I really like Next.js by the way 🙂.

Top Results From Across the Web

Blank Space - Wikipedia

"Blank Space" is a song by American singer-songwriter Taylor Swift, taken from her fifth studio album, 1989. The song was released to US...

BLANK SPACE

BLANK SPACE is a contemporary art gallery in New York City with a focus on experimental and mixed media techniques by artists from...

Empty Characters, Whitespaces & Blank Unicode Characters

Empty characters, blank characters, invisible characters and whitespace characters. They look like a space, but are in fact a different (unicode) character.

Taylor Swift – Blank Space Lyrics - Genius

Taylor Swift plays her “serial dater” image to her advantage with “Blank Space,” a synth-pop anthem that the RIAA certified 8x platinum in...

Invisible Character - (‎‎‎‎‎‎‎‎ㅤ) Blank Text Copy Paste - Edit Pad

You can copy and paste the empty space for different purposes. What is an Invisible Character? Characters that appear as empty spaces, or...