Search code examples
javascripthtmljquerycssfullpage.js

Hide jquery slide arrows and make appear in mobile version of website

I trying to make this thing, for example, on the first section of FullPage.js website there is three slides. On the default settings there are control arrows on the right and left, and that's okay. But, I want to make this arrows appear only on mobile version of website. For example, on the desktop there is no slides, just first one with all information, and on the mobile there is 3 slides so I can navigate with. How can I do this?
I know there is "controlArrows: false," option, but I wanna disable controlArrows only on desktop!
I'm using fullpage.js jquery

Solution

  • Either hide them

    @media (min-width:641px) {
  .fp-controlArrow: display: none
}

    OR test

    controlArrows: window.matchMedia("(max-width: 700px)"),