Autoscroll Carousel Doesn't get responsively cut off

Question

My site's carousel works when the website is at a normal desktop size such as 1440px width, but when I start shrinking it down, it doesn't get cut off like how it does on the right side. How can I fix this? You can see the issue in this picture, where it just isn't getting cut off and its creating a bunch of white space on the site in other areas because of this.

.pdp-examples {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers all children horizontally */
    justify-content: center;
    padding: 48px 0 72px;
    background: #F2F2F2;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}



.pdp-examples p {
margin-top: 12px;
margin-bottom: 32px;
color: var(--Subheading, #676464);
text-align: center;
font-family: "Instrument Sans";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% - 16px));
    }
}

.pdp-example-carousel-container {
    padding-bottom: 32px;
    max-width: 1160px;  /* or whatever container width makes sense */
    margin: 0 auto;     /* centers the carousel at large widths */
    overflow: hidden;   /* CRITICAL: ensures the scrolled images get clipped */
    position: relative;
}
.pdp-example-carousel-container::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* So mouse events pass through */
    z-index: 2;           /* Ensure it's above the images */
    background: linear-gradient(90deg, rgba(250, 250, 250, 0.50) 5%, rgba(250, 250, 250, 0.00) 20%, rgba(250, 250, 250, 0.00) 85%, rgba(250, 250, 250, 0.50) 95%);
  }

  


.pdp-example-carousel {
    max-width: 1160px;
    margin: 0 auto;
    padding-bottom: 16px;
    overflow: hidden; /* Hide the overflow */
    position: relative;

    width: 100%;
}

.slide-track {
    display: flex;
    white-space: nowrap;
    animation: scroll 50s linear infinite;
    gap: 16px; /* Add gap between images */
}

.pdp-carousel-slide {
    width: 169px;
    height: 169px;
    flex-shrink: 0; /* Prevent shrinking of slides */
}

.pdp-carousel-slide img {
    max-width: 100%;  /* shrinks if needed */
    height: auto;
    display: block;
  }

/* Clone the first item at the end using ::after */
.slide-track::after {
    content: "";
    display: inline-block;
    width: 169px; /* Same as slide width */
    height: 169px;
}

            <section class="pdp-examples">
                <h2>Examples</h2>
                <p>The type of shit flowscope can make</p>
                <section class="pdp-example-carousel-container">
                <div class="pdp-example-carousel">
                    <div class="slide-track">
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-1.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-2.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-3.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-4.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-5.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-6.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-7.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-8.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-9.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-10.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-11.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-12.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-13.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-14.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-15.png" height="169" width="169" alt="" />
                        </div>
                    </div>
                </div>
                <div class="pdp-example-carousel">
                    <div class="slide-track">
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-8.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-9.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-10.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-11.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-12.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-13.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-14.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-15.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-1.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-2.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-3.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-4.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-5.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-6.png" height="169" width="169" alt="" />
                        </div>
                        <div class="pdp-carousel-slide">
                            <img src="/Flowscope/img/examples/example-7.png" height="169" width="169" alt="" />
                        </div>
                    </div>
                </div>
                </section>

Meet · Accepted Answer · 2025-01-16 03:59:10Z

Just add overflow-x: hidden; to .pdp-examples and your issue will be fixed but if there is any specific reason that you cannot use it then do share that. Below is working example.

.pdp-examples {
  overflow-x: hidden;  /* <- Add this */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centers all children horizontally */
  justify-content: center;
  padding: 48px 0 72px;
  background: #F2F2F2;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}



.pdp-examples p {
  margin-top: 12px;
  margin-bottom: 32px;
  color: var(--Subheading, #676464);
  text-align: center;
  font-family: "Instrument Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100% - 16px));
  }
}

.pdp-example-carousel-container {
  padding-bottom: 32px;
  max-width: 1160px;
  /* or whatever container width makes sense */
  margin: 0 auto;
  /* centers the carousel at large widths */
  overflow: hidden;
  /* CRITICAL: ensures the scrolled images get clipped */
  position: relative;
}

.pdp-example-carousel-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* So mouse events pass through */
  z-index: 2;
  /* Ensure it's above the images */
  background: linear-gradient(90deg, rgba(250, 250, 250, 0.50) 5%, rgba(250, 250, 250, 0.00) 20%, rgba(250, 250, 250, 0.00) 85%, rgba(250, 250, 250, 0.50) 95%);
}




.pdp-example-carousel {
  max-width: 1160px;
  margin: 0 auto;
  padding-bottom: 16px;
  overflow: hidden;
  /* Hide the overflow */
  position: relative;

  width: 100%;
}

.slide-track {
  display: flex;
  white-space: nowrap;
  animation: scroll 50s linear infinite;
  gap: 16px;
  /* Add gap between images */
}

.pdp-carousel-slide {
  width: 169px;
  height: 169px;
  flex-shrink: 0;
  /* Prevent shrinking of slides */
}

.pdp-carousel-slide img {
  max-width: 100%;
  /* shrinks if needed */
  height: auto;
  display: block;
}

/* Clone the first item at the end using ::after */
.slide-track::after {
  content: "";
  display: inline-block;
  width: 169px;
  /* Same as slide width */
  height: 169px;
}

<section class="pdp-examples">
  <h2>Examples</h2>
  <p>The type of shit flowscope can make</p>
  <section class="pdp-example-carousel-container">
    <div class="pdp-example-carousel">
      <div class="slide-track">
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-1.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-2.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-3.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-4.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-5.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-6.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-7.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-8.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-9.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-10.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-11.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-12.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-13.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-14.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-15.png" height="169" width="169" alt="" />
        </div>
      </div>
    </div>
    <div class="pdp-example-carousel">
      <div class="slide-track">
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-8.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-9.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-10.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-11.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-12.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-13.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-14.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-15.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-1.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-2.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-3.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-4.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-5.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-6.png" height="169" width="169" alt="" />
        </div>
        <div class="pdp-carousel-slide">
          <img src="/Flowscope/img/examples/example-7.png" height="169" width="169" alt="" />
        </div>
      </div>
    </div>
  </section>

Collectives™ on Stack Overflow

Autoscroll Carousel Doesn't get responsively cut off

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related