Swiper.js Infinite Loop and Scroll Snap Conflict in React Project

Question

I'm facing an issue with integrating Swiper.js and CSS scroll snap in a React project. When I use both together, scrolling up after reaching the first image in an infinite loop is problematic. Here are the specifics:

Project Structure:

• React: Functional components with hooks.
• Swiper.js: Used for an image carousel with infinite looping enabled.
• CSS Scroll Snap: To create a snapping effect when scrolling between sections.

The Issue: When scrolling through a project gallery and reaching the first image again (due to the infinite loop), I'm unable to scroll up to the previous project. The image snaps back, preventing upward scrolling. The issue has occurred since I have been integrating scroll snap. Before I included scroll snap it worked fine.

Current Implementation: Project.js (excerpt)

import React, { useState, useEffect } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/effect-fade';
import { A11y, EffectFade } from 'swiper/modules';

const Project = ({ project_images, onTextColorChange, projectIndex }) => {
  const [swiper, setSwiper] = useState(null);
  const [currentTextColor, setCurrentTextColor] = useState('black');

  const renderImages = () => {
    if (!project_images || !project_images.data) return null;

    return project_images.data.map((projectImage, index) => {
      const imageUrl = projectImage?.attributes?.image?.data[0]?.attributes?.url ? `http://localhost:1337${projectImage.attributes.image.data[0].attributes.url}` : '';
      const textColor = projectImage.attributes.textColor;

      return (
        <SwiperSlide key={index} data-text-color={textColor} data-index={index} data-project={projectIndex}>
          {imageUrl && (
            <img
              src={imageUrl}
              alt={`Project Image ${index + 1}`}
              className="project-image"
              onLoad={() => {
                if (projectIndex === 1 && index === 0) {
                  setCurrentTextColor(textColor);
                  onTextColorChange(textColor);
                  console.log(`Text color set on load for project ${projectIndex} image ${index + 1}:`, textColor);
                }
              }}
            />
          )}
        </SwiperSlide>
      );
    });
  };

  useEffect(() => {
    if (swiper) {
      const handleSlideChange = () => {
        const currentSlide = swiper.slides[swiper.activeIndex];
        const textColor = currentSlide.getAttribute('data-text-color');
        console.log(`Updating text color to ${textColor}`);
        setCurrentTextColor(textColor);
        onTextColorChange(textColor);
      };

      swiper.on('slideChange', handleSlideChange);

      return () => {
        swiper.off('slideChange', handleSlideChange);
      };
    }
  }, [swiper, onTextColorChange]);

  return (
    <div className="project">
      <Swiper
        modules={[A11y, EffectFade]}
        spaceBetween={0}
        slidesPerView={1}
        onSwiper={setSwiper}
        effect="slide"
        loop={true}
        navigation={false}
        pagination={false}
        speed={1000}
      >
        {renderImages()}
      </Swiper>
    </div>
  );
};

parallax-scroll.css:

.parallax-container {
    height: 100vh;
    overflow-y: auto;
    width: 100vw;
    box-sizing: border-box;
    position: relative;
    scroll-snap-type: y mandatory;
}

.parallax-section {
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: 100%;
    box-sizing: border-box;
    background: none;
}

parallaxscroll.js:

const ParallaxScroll = ({ children }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      const container = containerRef.current;
      if (container) {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        container.style.transform = `translateY(-${scrollTop}px)`;
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div ref={containerRef} className="parallax-container">
      {children}
    </div>
  );
};

What I've Tried:

• Adjusting Swiper's settings.
• Updating Swiper's slide CSS.
• Custom scroll handling.
• Tuning scroll snap configurations.

Question: How can I resolve the conflict between Swiper.js's infinite loop and CSS scroll snap to allow smooth scrolling between projects, even when Swiper loops back to the first image?

Any insights or suggestions would be greatly appreciated!