In this video tutorial, we show you how to create a grid using the Essential Grid plugin with a carousel effect.
Here is the JavaScript code. As you can see, you can change the number 3000 to increase or decrease the interval:
(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);
})();
Suggestion: You can change the animation effect in the “Animations” section. Instead of “Slide Horizontal”, you can select any other. I personally found them all very dizzying—even hypnotic! O,O
Small issue: If you have several grids with different categories on the same page, this JavaScript will cause ALL of them to scroll—even if you only intended it for one… If anyone knows how to isolate the effect to just one grid, please share!
Solution: Forget this tutorial and create your carousel using the free plugin WP Posts Carousel. It’s very easy to configure. While it doesn’t compare to Essential Grid in terms of design, it gets the job done.
To finish, here’s an example of Essential Grid with a carousel effect using our web portfolio:
We hope this was helpful! See you next time 🙂
Would you like us to configure Essential Grid for you?
At Marabelia, we’ve been creating websites for many years and we know this fabulous plugin inside out. If you don’t want to complicate things, you can leave the Essential Grid setup in our hands 😉
