How to install a slider between two sections of an existing modular page

@jefrey, Plugin Lightslider is designed for modular pages.

In your previous attempt to add plugin Lightslider to skeleton Shop, you had to use a trick to inject Lightslider into non-modular pages because skeleton Shop does not use modular pages.

Now you have switched to skeleton Woo, which does use modular pages. You should now use Lightslider as a module the way it was build to be used.

After adding Lightslider the correct way as module, you will notice the slider is not working and the slides are shown vertically.

Have a look at the developer console in the browser. You'll notice an error:

Uncaught ReferenceError: $ is not defined at (index):419

This is typically an issue of jQuery being loaded too late. In Woo, jQuery is loaded at the bottom of the page, while the script for Lightslider is run earlier.

Fix:

• Copy file user/plugins/lightslider/templates/modular/lightslider.html.twig into your own child theme: user/themes/mywoo/templates/modular/lightslider.html.twig
• In the copied template change <script>...</script> into:
  JSCopy

  <script type="text/javascript">
  document.addEventListener("DOMContentLoaded",  () => {
     --- insert original javascript here ---
  });
  </script>
  

The code document.addEventListener("DOMContentLoaded", () => { --original script-- }) will cause the original script to be executed when the entire page (and also jQuery) has been loaded.