Need help to utilize the Owl Carousel shortcode plugin

11

@leG, Starting from a fresh installed One-Page skeleton, I did the following:

  • Installed the Owl Carousel plugin using bin/gpm install shortcode-owl-carousel
  • Copied image ‘/user/pages/01.home/03._callout/jeep.jpg’ to get 2 images in the page’s folder.
  • In file ‘/user/themes/quark/templates/modular/text.html.twig’, I replaced line 12:
    {{ image.html|raw }}
    with:
    {% set carousel = "[owl-carousel items=1 nav=true]" %}
{% for image in page.media.images %}
    {% set carousel = carousel~"<img src=\""~image.url~"\">" %}
{% endfor %}
{% set carousel = carousel~"[/owl-carousel]" %}

{{ carousel|shortcodes }}
  • To be sure the webpage is freshly created everytime I refresh the browser, I switched off caching in ‘/user/config/system.yaml’:
    cache:
  enabled: false

You should now see a working carousel with 2 identical pages when you refresh the browser…

Notes:

  • Switch caching on when you go in production!
  • Don’t edit ‘/user/themes/quark/templates/modular/text.html.twig’ as I did, but instead create a child theme to prevent future updates of Quark to override your changes.
1 Like