Slick.js recargar el control deslizante al cambiar el recurso de imagen
Hola @abzal0 la función correcta es en realidad ''updateScript'', ¡mi error! Así es como lo hice: Primero, definiendo el tipo de componente: Cada vez que se ejecuta el script, reinicio el ''slickjs'' para reinicializar, que puedes ver en el script. También he usado el tipo ''image'' directamente como hijos de mi compo...
Lee la respuesta completa abajo ↓Pregunta
Hola a todos, Estoy integrando el deslizador slick, el problema es recargar el deslizador después de subir la imagen.
Después de hacer clic en activos abiertos, el deslizador Slick debe reinicializarse para que el HTML normal del deslizador se convierta en el deslizador slick, que ocurre al añadir el componente al lienzo solo: $('#slickslider').slick({ DOTS: Cierto,
Infinito: Cierto, velocidad: 300, flechas: cierto, AdaptativoAltura: verdadero
});
Eso funciona en dos casos:
Cuando añado un nuevo deslizador al lienzo
Cuando subo una nueva imagen y luego arrastro y muevo el componente, se reinicializa
El código:
editor. DomComponents.addType('slickslider', {
modelo: {
init() {
PRUEBAS
this.listenTo(this, 'change:attributes', model =>{
$('#slickslider').slick({
DOTS: Cierto,
Infinito: Cierto,
velocidad: 300,
flechas: cierto,
AdaptativoAltura: verdadero
});
})
Sin resultados
},
Predeterminados: {
Componentes: [
{
Resaltable: Cierto,
Editable: Cierto,
Seleccionable: Cierto,
redimensionable:true
}],
Rasgos: [
{
tipo: 'Carrusel de botones',
etiqueta: 'Subir',
Nombre: 'upload1',
valor:'Upload 1',
},
{
tipo: 'select',
etiqueta: 'reload',
Nombre: 'Reload',
Opciones:[{
valor: 'sí',
Nombre: 'Sí'
},{
valor: 'no',
Nombre: 'No'
}],
cambioProp: 0
}
]}},
Vista:{
etiquetaNombre: 'div',
init({ model }) {
$('#slickslider').slick({
DOTS: Cierto,
Infinito: Cierto,
velocidad: 300,
flechas: cierto,
AdaptativoAltura: verdadero
});
RESULTADO: ignora este código
this.model.listenTo(this.model, 'change:attributes', model => {
this.render();
}); RESULTADO: no funciona
editor.render(); Rompe el editor
}
}
}
)
editor. BlockManager.add('slickslider', {
etiqueta: 'Slick Slider',
categoría: 'Medios',
atributos: { icon: 'fa fa-video' },
Contenido: {
Tipo: 'Deslizador Slicks',
activeOnRender: 1,
estilo: {
'color de fondo': '#000000',
},
script: function(){
var initMySLider = function() {
$('#slickslider').slick({
DOTS: Cierto,
Infinito: Cierto,
velocidad: 300,
flechas: cierto,
AdaptativoAltura: verdadero
});
}
var script = document.createElement('script');
script.onload = initMySLider;
script.src = '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js';
document.body.appendChild(script);
var link = document.createElement('link');
link.rel = 'hoja de estilo';
link.type = 'texto/css';
link.href = 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css';
var link2 = document.createElement('link');
link2.rel = 'hoja de estilo';
link2.type = 'texto/css';
link2.href = 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css';
document.body.appendChild(enlace);
document.body.appendChild(link2);
},
Contenido: '<div id="slickslider" data-gjs-type="slickslider"> <div class="slide" id="slide1"> <img src="oldimage1.png" > </div><div class="slide" id="slide2"> <img src="oldimage.png" > </div></div>'
} });
})
Resultado:
Tras subir una nueva imagen, ambas imágenes se muestran como un html normal:
! [imagen](https://user-images.githubusercontent.com/5952350/76681522-3cddd380-660d-11ea-8487-b0962bdc3e8c.png)
Después de mover el componente hacia arriba, se convierte en un deslizador js pulido que muestra:
nueva imagen subida e imagen antigua como deslizador
Mostrando flechas JS elegantes
! [imagen](https://user-images.githubusercontent.com/5952350/76681520-38b1b600-660d-11ea-9532-3fe2e0c45337.png)
Cualquier sugerencia sería de ayuda.
Resumen:
¿Cómo reiniciar la función 'script' dentro de editor.blockmanager.add para recargar el código jquery de Slider?Respuestas (3)
Hola @abzal0 la función correcta es en realidad ''updateScript'', ¡mi error! Así es como lo hice:
Primero, definiendo el tipo de componente:
domc.addType('slick-type', {
modelo: {
Predeterminados: {
CCID: '',
etiquetaNombre: 'div',
redimensionable: cierto,
Componentes: [
{
tipo: 'imagen',
},
{
tipo: 'imagen',
}
],
script: función () {
Id de const = '{[ ccid ]}'
try {
$('#' + id).slick('unslick');
} captura (e) {
}
$('#' + id).slick({
DOTS: Cierto,
Infinito: Cierto,
velocidad: 300,
flechas: Cierto,
AdaptativoAltura: verdadero
})
}
},
},
Vista: {
init() {
const ccid = this.model.ccid
this.model.set('ccid', ccid)
const viewObj = esto
const am = editor. Gestor de Activos;
const tImageView = am.getType('image').view;
am.addType('image', {
Vista: {
onClick() {
tImageView.prototype.onClick.apply(this);
viewObj.updateScript()
this.em.get('Modal').close();
},
}
})
}
}
})
Cada vez que se ejecuta el script, reinicio el ''slickjs'' para reinicializar, que puedes ver en el script. También he usado el tipo ''image'' directamente como hijos de mi componente, así que no tengo que llamar manualmente al comando ''open-assets'' en un rasgo personalizado. Por último, he sobrescrito el evento ''onClick'' del gestor de activos para llamar a nuestro script. ¡Salud!
@pouyamiralayi este código es increíblemente valioso, muchas gracias por compartirlo :) funciona mejor de lo que necesitaba. Te enviaré un correo electrónico, espero que respondas.
@abzal0
cómo reiniciar la función 'script' dentro de editor.blockmanager.add para recargar el código jquery del slider?
Para tu código ''script'', te sugiero que lo muevas a la definición de componente y ahí puedes emitir:
this.view.updateScript()
Para recargas de scripts. ¡Salud!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1719
Evento mientras haces clic en la imagen desde el modal del recurso
Hola @artf, Espero que estés bien. Estoy trabajando en gestión de activos. Tengo un total de 5 imágenes como imagen predeterminada del gest...
Issue #1047
[BUG] El modelo no puede cambiar después de cambiar el valor en el menú desplegable Seleccionar personalizado.
Hola, Estoy usando el enlace CDN para uvas JS de unpkg.com En mi proyecto, he usado un rasgo personalizado como menú desplegable de selecci...
Issue #5049
Problema al arrastrar un componente compuesto por imagen y enlace
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Versión de Brave Enlace de demo reproduci...
Issue #1508
[Pregunta]: Actualizar Canvas después de cambiar gjs-html externamente
Hola, He estado usando GrapesJS con ReactJS (GrapesJS está dentro de su propio componente React) y estoy teniendo problemas para subir una...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.