<p>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.</p>

<p><em>HTML:</em></p>

<pre><code>{% for slider in entry.myMatrixField.type('slider') %}
    &lt;div class="royalSlider"&gt;
    &lt;/div&gt;
{% endfor %}
</code></pre>

<p><em>JS:</em></p>

<pre><code>$('.royalSlider').royalSlider({
  controlNavigation: 'bullets'
});
</code></pre>

<p><em>CSS:</em></p>

<pre><code>.royalSlider {
  width: 300px;
  height: 200px;
  background: red;
}
</code></pre>

CC BY-SA 3.0
2015-03-27T12:54:41.583Z
I dont need to style them differently. I was under the impression that I needed to address them separately. Ill try it out. thanks carlcs!
imnotsure
CC BY-SA 3.0
2015-03-27T11:55:07.223Z
2015-03-27T11:55:07.223Z
carlcs
<p>I have an entry with a matrix field called <code>quantification</code> containing plain text and asset field. </p>

<p>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 <code>&lt;div id="slider1"&gt;</code>, <code>&lt;div id="slider2"&gt;</code>, etc. Within the for loop I think I can use <code>&lt;div id="slider{{ loop.index }}"&gt;</code> for that, right?</p>

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

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

<templating><forloop>
Creating JS slideshow with Twig "for" loop
# Creating JS slideshow with Twig "for" loop

(Asked by: username_0 on 2015-03-27)

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 , , etc. Within the for loop I think I can use  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.

**Tags:** templating, forloop

---

## 1 answers

### Answer by username_1 on 2015-03-27. Score: 3 | Accepted answer

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') %}
    
    
{% endfor %}

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

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

> **Comments:**
> **username_0**: I dont need to style them differently. I was under the impression that I needed to address them separately. Ill try it out. thanks carlcs!  

---

