Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-27T12:54:41.583Z
Answers.Text: 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!
Answers.UserDisplayName: imnotsure
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-27T11:55:07.223Z
Answers.LastActivityDate: 2015-03-27T11:55:07.223Z
Answers.UserDisplayName: carlcs
Body: <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>
  
Tags: <templating><forloop>
Title: Creating JS slideshow with Twig "for" loop
ThreadText: # 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 `<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.
  
  **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') %}
      <div class="royalSlider">
      </div>
  {% 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 username_1!  
  
  ---
  
  