Creating JS slideshow with Twig “for” loop

Question

I have an entry with a matrix field called quantification containing plain text and asset field.

Im looping through the matrix field and for each asset quantification I have a new gallery. Each div id needs to be unique, for example <div id="slider1">, <div id="slider2">, etc. Within the for loop I think I can use <div id="slider{{ loop.index }}"> for that, right?

But here comes the tricky part, at least for me. I also have some JS code (look here: http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-add-multiple-sliders-to-one-page-and-style-them-differently) which initiates each gallery. How do I dynamically add slider1, slider2, etc since this part of the code lives outside of the for loop?

Any suggestions with respect to the stylesheet, as I need to add them too there. At this point I'm going for hardcoded.

Answer 1

You didn't mention you want to style your sliders differently. I don't think you have to address them separately form your JS and CSS, if they should all look just the same.

HTML:

{% for slider in entry.myMatrixField.type('slider') %}
    <div class="royalSlider">
    </div>
{% endfor %}

JS:

$('.royalSlider').royalSlider({
  controlNavigation: 'bullets'
});

CSS:

.royalSlider {
  width: 300px;
  height: 200px;
  background: red;
}