隐藏jquery个滑动箭头并显示在手机版网站中

Question

我试着做这个东西，例如，在 FullPage.js 网站的第一部分有三张幻灯片。在默认设置下，左右都有控制箭头，这没关系。但是，我想让这个箭头只出现在网站的移动版本上。例如，在桌面上没有幻灯片，只有第一张包含所有信息，而在移动设备上有 3 张幻灯片，因此我可以使用它进行导航。我怎样才能做到这一点？
我知道有“controlArrows: false”选项，但我只想在桌面上禁用 controlArrows！
我正在使用 fullpage.js jquery

Answer 1

第一个解决方案是获取类名并设置一个媒体查询以仅在特定宽度上显示它们

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

还有如下js解决方案

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

Answer 2

要么隐藏它们

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

或测试

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

隐藏jquery个滑动箭头并显示在手机版网站中

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

html

javascript

css

jquery

fullpage.js