Home Widgets

Embed Snippet on Your Site

<script src="https://library.wpcode.com/embedjs/qor3w6xo.js/"></script>

Corrección de widgets tipo “slides.default”

Este script es un parche técnico diseñado para corregir errores de renderizado en los carruseles de Elementor; actúa detectando automáticamente la inicialización de cada widget de diapositivas mediante los hooks oficiales de la plataforma para inyectar las clases CSS estructurales (swiper y swiper-wrapper) que a veces se omiten por conflictos de carga, forzando finalmente un recalculo del diseño mediante un evento de redimensionamiento para asegurar que el slider se visualice correctamente y no se rompa la interfaz.

Paúl Pérez

<10

Code Preview

Comments


	`(function(jQuery) {`

	`'use strict';`

	`const fixSlidesClases = function() {`
	`if (elementorFrontend && elementorFrontend.hooks) {`

	`// Filtramos específicamente por el widget de slides`
	`elementorFrontend.hooks.addAction('frontend/element_ready/slides.default', function($scope) {`

	`// Buscamos el wrapper que debería tener la clase de swiper`
	`// En versiones recientes es .elementor-slides-wrapper`
	`const $wrapper = $scope.find('.elementor-slides-wrapper');`

	`if ($wrapper.length > 0 && !$wrapper.hasClass('swiper')) {`
	console.log(`%c [Fix] Clase "swiper" añadida al widget: ${$scope.data('id')} `, 'background: #27ae60; color: white;');

	`// Añadimos la clase faltante`
	`$wrapper.addClass('swiper');`

	`// También verificamos el contenedor interno (swiper-wrapper) por si acaso`
	`const $innerWrapper = $wrapper.find('.elementor-slides');`
	`if (!$innerWrapper.hasClass('swiper-wrapper')) {`
	`$innerWrapper.addClass('swiper-wrapper');`
	`}`

	`// Forzamos un evento de resize para que Swiper recalcule si ya existía la instancia`
	`window.dispatchEvent(new Event('resize'));`
	`}`
	`});`
	`}`
	`};`

	`// Ejecución en el init de Elementor`
	`jQuery(window).on('elementor/frontend/init', fixSlidesClases);`

	`// Ejecución inmediata si ya cargó`
	`if (typeof elementorFrontend !== 'undefined' && elementorFrontend.isInitCompleted) {`
	`fixSlidesClases();`
	`}`

	`})(jQuery);`

(function(jQuery) {
    'use strict';

    const fixSlidesClases = function() {
        if (elementorFrontend && elementorFrontend.hooks) {
            
            // Filtramos específicamente por el widget de slides
            elementorFrontend.hooks.addAction('frontend/element_ready/slides.default', function($scope) {
                
                // Buscamos el wrapper que debería tener la clase de swiper
                // En versiones recientes es .elementor-slides-wrapper
                const $wrapper = $scope.find('.elementor-slides-wrapper');

                if ($wrapper.length > 0 && !$wrapper.hasClass('swiper')) {
                    console.log(`%c [Fix] Clase "swiper" añadida al widget: ${$scope.data('id')} `, 'background: #27ae60; color: white;');
                    
                    // Añadimos la clase faltante
                    $wrapper.addClass('swiper');

                    // También verificamos el contenedor interno (swiper-wrapper) por si acaso
                    const $innerWrapper = $wrapper.find('.elementor-slides');
                    if (!$innerWrapper.hasClass('swiper-wrapper')) {
                        $innerWrapper.addClass('swiper-wrapper');
                    }

                    // Forzamos un evento de resize para que Swiper recalcule si ya existía la instancia
                    window.dispatchEvent(new Event('resize'));
                }
            });
        }
    };

    // Ejecución en el init de Elementor
    jQuery(window).on('elementor/frontend/init', fixSlidesClases);

    // Ejecución inmediata si ya cargó
    if (typeof elementorFrontend !== 'undefined' && elementorFrontend.isInitCompleted) {
        fixSlidesClases();
    }

})(jQuery);

Embed Snippet on Your Site

Corrección de widgets tipo “slides.default”

Comments

Add a Comment Cancel Reply