Foundation6 Orbit Slider: how to show slides with bullets when using a web app

Report · Apr 24, 2016

In Adobe Business Catalyst I've created a "hero slider" web app. (For the css framework I'm using Foundation 6). When the web page gets rendered it shows the slides dynamically. But I don't know how to show the orbit-bullets dynamically based on the number of slides in the web app.

Can this be done with liquid? If so, what should the liquid-code look like?

In the Foundation6 example, I want to trigger what is between the <nav class="orbit-bullets"> class.

Thanks for any help.

Kind regards

Carla

<body>

<pre>

<code>

<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>

<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>

<figcaption class="orbit-caption">Space, the final frontier.</figcaption>

</li>

<figcaption class="orbit-caption">Lets Rocket!</figcaption>

</li>

<figcaption class="orbit-caption">Encapsulating</figcaption>

</li>

<figcaption class="orbit-caption">Outta This World</figcaption>

</li>

</ul>

<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>

<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>

<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>

<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>

</nav>

</div>

</code>

</pre>

</body>

Report · Apr 24, 2016

I haven't tested this code but here is the way I would do this with web apps. Change your fields to match your web app:

<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>

<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>

{module_webapps id="XXXX" filter="all" resultsPerPage="10" hideEmptyMessage="true" rowCount="" collection="orbitSlides" template=""}

{% for i in orbitSlides.items -%}

<figcaption class="orbit-caption">{{i.['My Caption']}}</figcaption>

</li>

{% endfor -%}

</ul>

{module_webapps id="XXXX" filter="all" resultsPerPage="10" hideEmptyMessage="true" rowCount="" collection="orbitBullets" template=""}

{% for b in orbitBullets.items -%}

<button {% if forloop.first == "true" -%}class="is-active"{% endif -%} data-slide="{{forloop.index0}}"><span class="show-for-sr">{{b.['Slide Details']}}</span>{% if forloop.first == "true" -%}<span class="show-for-sr">Current Slide</span>{% endif -%}</button>

{% endfor -%}

</nav>

</div>

As long as the items are sorted the same, I believe this will work.

Hope this helps.

Report · Apr 24, 2016

Hi Linda,

Thanks for your quick reply and your effort. I will this out and let you know if it works.

Krgds, Carla

Report · Apr 25, 2016

Hi Linda,

Thanks for providing the code. It also helped me to understand liquid mark-up better. Everything works great.

Krgds Carla

Adobe Community

Foundation6 Orbit Slider: how to show slides with bullets when using a web app

1 Correct answer