1

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.

3

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;
}
  • 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 Mar 27 '15 at 12:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.