Installing a slider script in a custom theme

Hi there!

I'm trying to learn to use Grav by doing a small portfolio project.
It's a modular page with several slideshows. The page is very simple and already exists, so I chose not to work with a parent theme. I'm just trying to adapt it in Grav.

I have been trying to install Siema (which shouldn't be too much of a technical challenge), but I'm having a harder time than expected. I researched similar issues, but there must be something basic I don't get right.

So I made a modular page called projects.html.twig. It has a block to include the content of several modules:

{% block content %}
  {{ page.content }}
    {% for module in page.collection() %}
      <div class="left">
        {{ module.title }}
      </div>
      <div class="right">
      <div class="siema">
        <div>
          {{ module.content|raw }}
        </div>
      </div>
      <button class="prev">Prev</button>
      <button class="next">Next</button>
    </div>
  {% endfor %}
{% endblock %}

My modules have a default template, but it doesn't seem to be active in any way. The modular page just displays the titles of the module pages, and in another div, images between p tags.

After the footer of my modular page I'm loading the scripts for Siema:

{% do assets.addJs('theme://js/siema-master/dist/siema.min.js', {group: 'bottom'}) %}
{% do assets.addJs('theme://js/siema-master/script.js', {group: 'bottom'}) %}    
</body>
</html>

This seems to work; no message from the console.

However, the script doesn't function as expected; I just have 2 series of images. Images that should be hidden are all visible, and buttons do nothing.
Any idea what's wrong here?

[edited for formatting]

Hi @Karmalakas ! Thank you for taking a moment to look into this.

I think I'm doing something fairly similar to what's shown on Simea's page... however I could also be doing something stupid along the way. This is from my twig template:

<div class="siema">
  <div>
    {{ module.content|raw }}
  </div>
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>
<script>
  const mySiema = new Siema();
  document.querySelector('.prev').addEventListener('click', () => mySiema.prev());
  document.querySelector('.next').addEventListener('click', () => mySiema.next());
</script>

I tried calling siema.min.js both from the head and just before /html

Yes, I do want to have a slider for each module (although my original intention was to just have one when you have more than one image, but this sounds more complex).

Your plugin sounds great! I just had a try with siema because I used it before, so it sounded like a safe bet for this little exercise.

Where's your const mySiema = new Siema()? It's shown on their example. Also I don't know how Siema works with multiple sliders on same page. I suspect you might have to init separate instances. Having that in mind, you would have to accordingly bind prev and next buttons.

It's a bit difficult to advice when there's no final expected result shared.

Thank you. const mySiema = new Siema() is in the <script> bit, just under the buttons in my previous post. I did remember to use Siema in multiple sliders on one page. You are absolutely right, it does require some changes to the code in that case.

Sorry for not providing enough context. I was basically trying to replicate this page: https://www.formulaprojects.net/

This being said – I might drop the whole Siema scheme and focus on implementing your plugin instead. It sounds incredibly customizable and convenient.

Many thanks for helping

@PurpleRoom:
I was basically trying to replicate this page: https://www.formulaprojects.net/

Can't check, because of:

Bandwidth Limit Exceeded

Anyway, if you initialized it correctly and have all the selectors available, it should work. But in your example you have multiple bindings for same buttons, because you bind same classes in a loop all over and you overwrite your Siema instance because of the same reason

Bandwidth Limit Exceeded

Interesting! I guess technical issues tend to gather in groups

Anyway, just to let you know I managed to install your plugin and implement it in my template in minutes, and it's working like a charm. I like how it includes any media by default, making it very convenient in my opinion. Many thanks for making this work available.

Glad to hear you got it working. But as a solution I think you should accept either my first reply, or share a solution what you did exactly and accept this own reply 😉

My apologies for my bad forum manners! Your first answer was definitely the solution. Thanks again