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
Either hide them
@media (min-width:641px) {
.fp-controlArrow: display: none
}
OR test
controlArrows: window.matchMedia("(max-width: 700px)"),
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