This was my solution:

[GizFullStackDevWip]

This was my solution:

  constructor(props) {
    super(props);

    this.carouselSettings = {..., touchThreshold: 5, ...}; // explicitly set touchThreshold since we reference it later
    this.preventTouch = this.preventTouch.bind(this);
    this.touchStart = this.touchStart.bind(this);
  }

  componentDidMount() {
    // Disable touchmove to prevent scrolling entire page
    const carousel = document.getElementById('someid'); // Your site element containing react-slick's carousel-container
    carousel.addEventListener('touchstart', this.touchStart);
    carousel.addEventListener('touchmove', this.preventTouch, { passive: false });
  }

  touchStart(e) {
    // capture user's starting finger position, for later comparison
    this.firstClientX = e.touches[0].clientX;
  }

  preventTouch(e) {
    // only prevent touch on horizontal scroll (for horizontal carousel)
    // this allows the users to scroll vertically past the carousel when touching the carousel
    // this also stabilizes the horizontal scroll somewhat, decreasing vertical scroll while horizontal scrolling
    const clientX = e.touches[0].clientX - this.firstClientX;
    const horizontalScroll = Math.abs(clientX) > this.carouselSettings.touchThreshold;
    if (horizontalScroll) {
      e.preventDefault();
    }
  }

Thanks to @yunyong for his helpful comment.

Originally posted by @randallreedjr in #1281 (comment)

[GizFullStackDevWip]

This solution worked but now my vertical scroll is not working