React Splide slider

Curriculum Help
,
1

Hi, I’m new to using React and I’m trying to implement 2 sliders. One will contain my pages vertically and I have a second slider in my projects component.

I need for the page slider to stop when I get to projects and then slide through the projects and only after continue scrolling past to the next section. ideally I would love to implement the same for scrolling back.

how can I achieve this?

import ‘./App.css’;
import Navbar from ‘./components/Navbar’;
import Hero from ‘./components/Hero’;
import About from ‘./components/About’;
import Skills from ‘./components/Skills’;
import Projects from ‘./components/Projects’;
import Contact from ‘./components/Contact’;
import ‘@splidejs/react-splide/css’;
import { Splide, SplideSlide } from ‘@splidejs/react-splide’;
import { TransitionGroup, CSSTransition } from ‘react-transition-group’;
function App() {
return (



<Splide
aria-label=“pages”
data-splide=‘{“wheel”: true, “arrows”: false, “direction”: “ttb”, “height”: “100vh” }’

    <TransitionGroup component={null}>
      <CSSTransition classNames="slide-down" timeout={800}>
        <SplideSlide>
          <Hero />
        </SplideSlide>
      </CSSTransition>
      <CSSTransition classNames="slide-down" timeout={800}>
        <SplideSlide>
          <About />
        </SplideSlide>
      </CSSTransition>
      <CSSTransition classNames="slide-down" timeout={800}>
        <SplideSlide>
          <Skills />
        </SplideSlide>
      </CSSTransition>
      <CSSTransition classNames="slide-down" timeout={800}>
        <SplideSlide>
          <Projects />
        </SplideSlide>
      </CSSTransition>
      <CSSTransition classNames="slide-down" timeout={800}>
        <SplideSlide>
          <Contact />
        </SplideSlide>
      </CSSTransition>
    </TransitionGroup>
  </Splide>
</div>

);
}

export default App;

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.