-1

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

mplungjan
  • 169,008
  • 28
  • 173
  • 236
Walkie_UA
  • 43
  • 6
  • 1
    Welcome to Stack Overflow! Please visit the [help], take the [tour] to see what and [ask]. If you get stuck, post a [mcve] of your attempt, noting input and expected output using the `[<>]` [snippet editor](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do). – mplungjan Mar 14 '22 at 09:59

2 Answers2

0

Either hide them

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

OR test

controlArrows: window.matchMedia("(max-width: 700px)"),
mplungjan
  • 169,008
  • 28
  • 173
  • 236
-1

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
S.Aminnejad
  • 109
  • 1
  • 3
  • 12
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 14 '22 at 10:02