Estoy tratando de hacer esto, por ejemplo, en la primera sección del sitio web FullPage.js hay tres diapositivas. En la configuración predeterminada, hay flechas de control a la derecha y a la izquierda, y eso está bien. Pero quiero que estas flechas aparezcan solo en la versión móvil del sitio web. Por ejemplo, en el escritorio no hay diapositivas, solo la primera con toda la información, y en el móvil hay 3 diapositivas con las que puedo navegar. ¿Cómo puedo hacer esto?
Sé que existe la opción "controlArrows: false", ¡pero quiero deshabilitar controlArrows solo en el escritorio!
estoy usando fullpage.js jquery
O esconderlos
@media (min-width:641px) { .fp-controlArrow: display: none }O prueba
controlArrows: window.matchMedia("(max-width: 700px)"),La primera solución es obtener los nombres de clase y establecer una consulta meda para mostrarlos solo en un ancho específico.
@media(min-width:768px){ display: none }también hay una solución js como la siguiente
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