Buy me a coffee

Autoscroll Gallery in Footer

#1. First, create a Page in Not Linked with Name/URL

  • Footer Gallery – /footer-gallery

Gallery Section In Footer 01 Min

#2. Add a Gallery Reel and some text to this page, something like this

Autoscroll Gallery In Footer 01 Min

#3. Install this plugin

The plugin will give you some code like this to Code Injection – Header/Footer

Add A Section To Top Of Blog Posts Use Not Linked Page 03 Min

Add A Section To Top Of Blog Posts Use Not Linked Page 04 Min

#4. Edit Site Footer > Add a Code Block with this code

<div data-wm-plugin="load" data-target="/footer-gallery"></div>

Autoscroll Gallery In Footer 02 Min

#5. Use this code to Code Injection – Footer

document.addEventListener('wmSectionLoader:scriptsLoaded', () => {
  const container = document.querySelector('.wm-load-container[data-target="/footer-gallery"]');
  const footerSection = document.querySelector('#footer-sections')
  footerSection.insertAdjacentElement('afterbegin', container)
 const nextButton = document.querySelector('.gallery-reel-control-btn[data-next]');
setInterval(() => {;
}, 3000);

Autoscroll Gallery In Footer 03 Min


Autoscroll Gallery In Footer 04 Min

#6. Extra code

#6.1. Reduce Reel Height
Note: reduce height = increase number of items/row

Add code to the Custom CSS box

/* reduce reel height */
[data-wm-plugin] .gallery-reel {
    height: 20vh !important;

Autoscroll Gallery In Footer 05 Min

#6.2. Make the Reel touch the left/right of the screen

Add code to the Custom CSS box

/* reel touch left right screen */
[data-wm-plugin] .gallery-reel {
    padding-left: 0px !important;
    padding-right: 0px !important;

Autoscroll Gallery In Footer 06 Min