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

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

CodePudding user response：

Either hide them

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

OR test

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

CodePudding user response：

first solition is to get the classnames and set a meda query to display them only on a specific width

@media(min-width:768px){
  display: none
}

there is also a js solution like below

function myFunction(x) {
 if (x.matches) { // If media query matches
  $('#navigation').css('display', 'none');
 } else {
  $('#navigation').css('display', '');
}
}

var x = window.matchMedia("(min-width: 768px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state 
changes