Mx Swiper3

1. Requisitos

• Joomla con el componente principal «Artículos» (com_content) activado al utilizar la fuente «Artículos».
• Un módulo publicado asignado a una posición de plantilla y a elementos de menú.
• Joomla 4 o versiones posteriores utilizan el modelo de contenido moderno; las instalaciones de Joomla anteriores compatibles utilizan el modelo heredado.
• Para el redimensionamiento de imágenes de artículos, el directorio de caché de Joomla debe ser de escritura.
• En el modo «Carpeta», los archivos multimedia deben encontrarse dentro del directorio images .

2. Instalación

1. En el panel de administración de Joomla, abre Sistema > Instalar > Extensiones.
2. Sube el paquete ZIP de Mx Swiper3.
3. Abre Extensiones > Módulos y crea o edita Mx Swiper3.
4. Establece el módulo en «Publicado», elige una posición en la plantilla y configura la «Asignación de menú».
5. Guarda el módulo y comprueba la página de la interfaz de usuario asignada.

Mantén el assets, core, fieldy tmpl . Contienen las bibliotecas de Swiper, las funciones auxiliares de imágenes, los campos de formulario personalizados y los diseños de estilo.

3. Inicio rápido

1. Elige un estilo en «Configuración general».
2. Elige una fuente: Artículos, Elementos personalizados o Carpeta.
3. Configura los campos que se muestran para esa fuente.
4. Establece el efecto del control deslizante, la altura, el número de elementos adaptables, la navegación y la paginación.
5. Publica el módulo en una posición visible de la plantilla.

Para la primera prueba, utiliza «Artículos», selecciona una categoría publicada, mantén el orden predeterminado de las imágenes, activa la paginación y las flechas, y utiliza el efecto de deslizamiento predeterminado.

4. Cómo funciona el módulo

1. Selección de la fuente: la get_source configuración selecciona la ruta de los datos.
2. Preparación de datos: se consultan los artículos de Joomla, se leen los elementos personalizados del subformulario o el modo «Carpeta» escanea el directorio seleccionado.
3. Selección del diseño: el valor seleccionado de get_style carga el archivo correspondiente desde tmpl.
4. Carga de recursos: se cargan los archivos JavaScript y CSS de Swiper para el módulo. Los recursos de Fancybox solo se cargan cuando Fancybox está habilitado; jQuery solo se carga cuando se solicita.
5. Inicialización de Swiper: assets/swiper/functions.js lee las opciones generadas de Swiper, incluyendo los ajustes de efecto, bucle, reproducción automática, puntos de ruptura, navegación, paginación y rueda del ratón.
6. Representación de diapositivas: cada elemento se convierte en una diapositiva de Swiper que contiene contenido multimedia, texto opcional y un enlace opcional o un control de lightbox.

El módulo almacena en caché la lista preparada a través de la caché de módulos de Joomla. Borra la caché de Joomla tras modificar los archivos fuente, el contenido de las carpetas o la configuración si la interfaz de usuario sigue mostrando un resultado antiguo.

5. Configuración general

Estilo

Carga una de las plantillas de presentación disponibles: Default o Style 1 a través de Style 19. El estilo controla la composición de las diapositivas y el tratamiento visual; no todos los estilos utilizan todas las opciones de Swiper de la misma manera.

Fancybox

Cuando está activado, añade un botón de pantalla completa a los contenidos multimedia compatibles y abre la imagen, el archivo MP4, el vídeo de YouTube o el de Vimeo actual en una galería de Fancybox. Está disponible para los estilos enumerados en la regla condicional del campo y está desactivado por defecto.

Imágenes de capa

Disponible para el Estilo 1. Añade las capas de fondo decorativas del estilo por encima y por debajo del contenido de la diapositiva.

Altura del deslizador

Establece la altura que utiliza el deslizador, desde 100vh hasta valores fijos comprendidos entre 500px y 1000px.

Versión

Selecciona la variante visual clara u oscura. La opción «clara» carga la hoja de estilos clara del módulo.

Fondo de la capa

Activa la superposición semitransparente utilizada por los estilos compatibles con la capa de diapositivas oscura. Esto puede mejorar el contraste del texto sobre las fotografías.

6. Controles del deslizador

Efecto de deslizamiento

Elige el efecto de transición compatible con el estilo seleccionado:

• Fade, Slide, Coverflow, Flip, Cube, Creative, Cards
• Gel está disponible como gl para la configuración predeterminada y la del Estilo 14.

Diapositivas centradas y Bucle

La opción «Diapositivas centradas» centra la diapositiva activa. La opción «Bucle» reproduce las diapositivas de forma continua, pasando de la última a la primera.

Reproducción automática y tiempo de retraso

Activa la reproducción automática para que las diapositivas avancen automáticamente. El tiempo de retardo controla la pausa entre diapositivas, de 2 a 15 segundos. La reproducción automática está configurada para no detenerse cuando un visitante interactúa con el control deslizante.

Velocidad de animación y Espacio entre

La velocidad de animación controla la duración de la transición, de 0,5 a 7 segundos. El espacio entre diapositivas añade un intervalo entre ellas utilizando los valores disponibles de 0 a 40.

Efecto de paralaje

Activa el movimiento de paralaje de la imagen en los estilos compatibles. La «Intensidad del paralaje» establece el porcentaje de movimiento entre el 1 % y el 40 %.

Rueda del ratón

Permite a los visitantes cambiar de diapositiva con la rueda del ratón en los estilos que ofrecen esta opción. El estilo 15 utiliza su propio campo para la rueda del ratón.

Recuento de elementos adaptables

Para los efectos «Diapositiva», «Coverflow» y «Tarjetas», configura el número de elementos visibles de forma independiente para ordenador de sobremesa, portátil, tableta y móvil. Otros efectos suelen mostrar una sola diapositiva en el punto de ruptura más grande, ya que su diseño visual requiere una única diapositiva activa.

Paginación y flechas

La paginación muestra indicadores de diapositivas en los que se puede hacer clic y ofrece dos estilos. Las flechas muestran controles de «anterior» y «siguiente» y ofrecen tres estilos. Ambos se pueden desactivar de forma independiente.

Miniaturas

Los estilos 16 y 19 muestran la configuración «Miniaturas». Esta controla el número de diapositivas en miniatura visibles, de 2 a 8.

7. Fuentes de datos

Artículos

El modo «Artículos» utiliza el modelo com_content modelo de artículos de Joomla. Muestra los artículos publicados disponibles para el visitante actual y crea los enlaces al artículo, a la categoría y a «Leer más».

• Seleccionar categoría: limita los resultados a una o más categorías.
• Artículos de categorías secundarias: incluye o excluye las categorías descendientes.
• Profundidad de la categoría: limita el número de niveles de subcategorías que se incluyen.
• Etiquetas: filtra los artículos según las etiquetas de Joomla seleccionadas.
• Artículos destacados: muestra todos los artículos que cumplen los requisitos, oculta los artículos destacados o muestra solo los artículos destacados.
• Campo del artículo por el que ordenar: orden del administrador, orden de destacados, visitas, título, ID, alias, fechas de creación/modificación/publicación o aleatorio.
• Sentido de ordenación: ascendente o descendente.
• Recuento: número máximo de artículos. Un valor de 0 significa todos los artículos.
• Abrir enlace: en la misma ventana, en una nueva ventana o en una ventana emergente.
• Campos personalizados: activa eventos del complemento de contenido de Joomla para el artículo.

Visualización del artículo

• Título de la categoría: muestra el nombre de la categoría y el enlace a la misma.
• Título del artículo: muestra el título del artículo.
• Longitud máxima del título: trunca el título según el número de caracteres; 0 mantiene el título completo.
• Visualización de la descripción: muestra el texto de introducción del artículo sin formato.
• Longitud máxima de la descripción: trunca el texto de introducción; 0 conserva todo el texto.
• Visualización del autor: muestra el autor del artículo.
• Visualización de la fecha: muestra la fecha de creación.
• Formato de fecha: controla el formato de fecha de Joomla/PHP, como d M Y o Y-m-d.
• Mostrar «Leer más» y texto de «Leer más»: controla el botón de enlace del artículo.

Imágenes del artículo

El ayudante busca en las fuentes de imágenes habilitadas en el orden indicado en «Orden de obtención». Los estilos del artículo utilizan la primera imagen disponible.

• image_intro: la imagen de introducción de «Imágenes y enlaces» de Joomla.
• image_fulltext: la imagen de texto completo de Joomla.
• inline_introtext: imágenes encontradas en el código HTML de la introducción.
• inline_fulltext: imágenes encontradas en el código HTML del texto completo.
• external: rutas de imágenes externas o generadas compatibles con el asistente.

Activa o desactiva cada fuente mediante el campo «Desde imagen...» correspondiente. Si no se encuentra ninguna imagen, el módulo utiliza modules/mod_mx_swiper3/assets/images/noimage.jpg o la ruta del marcador de posición configurada.

Redimensionamiento de imágenes

El modo de redimensionamiento admite las opciones «Ninguno», «Centrar», «Llenar», «Ajustar» y «Estirar». Cuando el redimensionamiento está activado, configura la calidad de compresión de 1 a 100, el formato de salida (GIF, JPEG, PNG o WEBP), el comportamiento de la transparencia, el ancho y la altura. Las imágenes generadas se almacenan a través del asistente de imágenes y la caché del módulo.

Elementos personalizados

Los elementos personalizados se introducen directamente en el campo «Elementos repetibles». Añade un elemento por cada diapositiva y, a continuación, arrastra o ordena las entradas en el orden deseado.

Los elementos personalizados no utilizan categorías de artículos, metadatos de artículos ni extracción de imágenes de artículos. Sus archivos multimedia y su texto proceden íntegramente de los valores del subformulario.

Modo de carpeta

El modo «Carpeta» lee los archivos multimedia del directorio seleccionado dentro de la images , incluidas las subcarpetas anidadas. El campo «Carpeta» se rellena mediante el campo personalizado del módulo foldertree del módulo.

• Tipos de archivo admitidos: jpg, jpeg, png, gif, webp, bmp, y mp4.
• Las imágenes se convierten en diapositivas de imagen; los archivos MP4 se convierten en diapositivas de vídeo en bucle y sin sonido.
• Los archivos se ordenan de forma natural según su ruta relativa.
• El nombre del archivo que precede a la primera barra vertical se utiliza como título; cualquier número inicial seguido de un separador se elimina del título que se muestra.
• El texto que aparece después de la primera barra vertical se utiliza como descripción.
• Los guiones y los guiones bajos, tanto en el título como en la descripción, se muestran como espacios.

Ejemplo de nombre de archivo:

01 - Our-services | Fast, reliable support.jpg

Esto genera el título «Nuestros servicios» y la descripción «Asistencia rápida y fiable»; el 01 - queda oculto. Establece el recuento para limitar el número de elementos analizados; utiliza 0 para todos los archivos que coincidan.

8. Estilos

El paquete incluye 20 diseños seleccionables: Default y Style 1 hasta Style 19. Cada diseño está implementado en su propio archivo en tmpl y comparte los mismos tipos de fuente y el mismo modelo multimedia básico, aunque organiza los subtítulos, las superposiciones, los controles y las miniaturas de forma diferente.

• Por defecto: presentación Swiper de uso general con las opciones de efectos ampliadas.
• Estilo 1: admite la configuración opcional «Imágenes en capas».
• Estilos 2-13: composiciones alternativas de contenido y superposiciones utilizando los efectos estándar de Swiper.
• Estilo 14: utiliza el selector de efectos ampliado, incluido «Gel».
• Estilo 15: dispone de su propia opción de rueda del ratón.
• Estilos 16 y 19: admiten el control «Número de miniaturas».
• Estilo 17: utiliza el tratamiento de control deslizante a altura completa del módulo y el marcado relacionado con las miniaturas.
• Estilo 18: es compatible con Fancybox y los controles de superposición estándar.

La combinación exacta de campos condicionales se controla mediante mod_mx_swiper3.xml. Si una configuración queda oculta tras cambiar de estilo, es intencionado: el diseño seleccionado no muestra esa opción.

9. CSS personalizado y ajustes avanzados

• Código CSS: añade declaraciones CSS seguras y filtradas por HTML para esta instancia del módulo. Limita los selectores a las clases del módulo siempre que sea posible.
• Sufijo de clase del módulo: añade un sufijo de clase al contenedor del módulo para aplicar estilos específicos de la plantilla.
• Diseño alternativo: selecciona una sustitución del diseño del módulo de Joomla cuando haya una disponible.
• Almacenamiento en caché: utiliza la configuración global de caché de módulos de Joomla o desactiva el almacenamiento en caché para el módulo.
• Tiempo de caché: controla la duración de la caché cuando la configuración de caché del módulo utiliza un tiempo personalizado.
• Cargar jQuery: carga el archivo jQuery 3.6.0 incluido. Déjalo desactivado si la plantilla ya carga una instancia compatible de jQuery.

10. Solución de problemas

No aparecen las diapositivas

• Comprueba que el módulo esté publicado, asignado al elemento de menú actual y colocado en una posición de la plantilla que se muestre.
• En el caso de los artículos, comprueba que estén publicados, sean accesibles, estén asignados a la categoría seleccionada y cumplan los filtros de idioma, etiqueta o artículos destacados.
• En el caso de los elementos personalizados, comprueba que haya al menos una entrada publicada.
• En el modo «Carpeta», selecciona una carpeta de las que aparecen a continuación images y comprueba la extensión del archivo.

Faltan imágenes

• Comprueba los controles de origen de las imágenes del artículo y la opción «Orden de obtención».
• Comprueba que el campo multimedia del elemento personalizado coincida con el tipo seleccionado.
• Comprueba la ruta del marcador de posición y los permisos de caché.

Los títulos o las descripciones de las carpetas están vacíos

Utilice la convención de nombres de archivo Title | Description.extension. El carácter de barra vertical separa el título y la descripción; las carpetas se analizan de forma recursiva, pero solo se incluyen las extensiones compatibles.

El vídeo no se reproduce

Los elementos MP4 utilizan los atributos de reproducción automática, silencio y bucle. Comprueba que se pueda acceder a la URL, que el archivo sea un MP4 válido y que el servidor envíe un tipo MIME de vídeo. Los elementos de YouTube y Vimeo requieren el ID del vídeo, no la URL completa de visualización.

La altura del control deslizante o los efectos no se ven bien

Comprueba el estilo seleccionado, la altura del control deslizante, la compatibilidad de los efectos y si alguna hoja de estilo de otra plantilla anula las clases Swiper del módulo. Vacía las cachés de Joomla y del navegador tras realizar cambios en el CSS.

Conflictos de JavaScript

Desactiva «Cargar jQuery» cuando la plantilla ya haya cargado jQuery. Comprueba también que ninguna otra extensión esté cargando una versión de Swiper incompatible o recursos duplicados de Fancybox.

11. Actualización

Haz una copia de seguridad de la configuración del módulo y de los archivos del sitio antes de actualizar. Instala el paquete más reciente a través del instalador de extensiones de Joomla. El manifiesto XML declara un servidor de actualizaciones, por lo que Joomla puede ofrecer actualizaciones cuando se pueda acceder a ese servidor. Tras la actualización, comprueba el estilo seleccionado, los datos de origen y el CSS personalizado.