En este vídeo tutorial mostramos cómo crear un grid con el plugin essential grid con efecto carrusel / carousel.
Aquí tienes el javascript, como ves puedes modificar el número 3000 y así que el intervalo sea mayor o menor:
(function() {
// change the number "3000" to however many seconds should pass before the Grid's page changes
var interval = 3000, timer, mouseOn;
jQuery('.esg-grid').on('mouseenter', function() {
mouseOn = true;
clearInterval(timer);
}).on('mouseleave', mouseOut);
function mouseOut() {
mouseOn = false
timer = setInterval(changeGrid, interval);
}
function changeGrid() {
jQuery('.esg-right').trigger('click');
}
var gridLoaded = setInterval(function() {
if(jQuery('.esg-grid').is(':visible')) {
clearInterval(gridLoaded);
if(!mouseOn) mouseOut();
}
}, 500);
})();
Sugerencia: podemos cambiar el efecto en el apartado «Animations» y en lugar de «Slide horizontal» seleccionar cualquier otro. A mí me han parecido todos los resultados muy mareantes ¡hasta hipnóticos! O,O
Problemilla: Si tienes varios grids con diferentes categorías en una misma página el javascrip hará que TODOS se muevan, aunque solo lo hayas aplicado en un solo.. Si alguien sabe como aislar el efecto a sólo un grid ¡Que se manifieste!
Solución: Olvida este tutorial y haz tu carrusel con el plugin gratuito WP Posts Carousel , es muy fácil de configurar y aunque no tiene nada que ver con Essential Grid en cuanto a diseño nos salva la papeleta.
Para finalizar aquí te dejamos un ejemplo de Essential Grid con efecto carrusel /carousel con nuestro portfolio web:
Esperamos que te sea útil!! Hasta otra 🙂
¿Quieres que configuremos por ti Essential Grid?
En marabelia llevamos muchos años creando páginas web y nos conocemos al dedillo este fabuloso plugin. Si no quieres complicarte la vida puedes dejar en nuestras manos la configuración de Essential Grid 😉
Muchísimas gracias por tu tutorial, me ha sido de mucha ayuda aunque no sé por qué mi carrusel no rota por sí mismo, sino que hay que pinchar sobre las flechitas para que se mueva. Alguna idea? Gracias!
Hola Laura, ¿Has copiado bien el script? ¿Puede ser que otro elemento esté interfiriendo? ¿Lo has probado con otro Theme?
Hola, buen tutorial gracias!!
¿Sabes si hay alguna forma de hacer que los post pasen de un lado al otro del carrusel de forma táctil. Es decir, arrastrando las cajitas en lugar de usar los botones con flechas?
Hola Yoyo, no conozco la forma, si lo logras compártelo 😉