Foundation6 Orbit Slider: how to show slides with bullets when using a web app
in adobe business catalyst i've created "hero slider" web app. (for css framework i'm using foundation 6). when web page gets rendered shows slides dynamically. don't know how show orbit-bullets dynamically based on number of slides in web app.
can done liquid? if so, should liquid-code like?
in foundation6 example, want trigger between <nav class="orbit-bullets"> class.
thanks help.
kind regards
carla
<body>
<pre>
<code>
<div class="orbit" role="region" aria-label="favorite space pictures" data-orbit>
<ul class="orbit-container">
<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>
<li class="is-active orbit-slide">
<img class="orbit-image" src="assets/img/orbit/01.jpg" alt="space">
<figcaption class="orbit-caption">space, final frontier.</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="assets/img/orbit/02.jpg" alt="space">
<figcaption class="orbit-caption">lets rocket!</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="assets/img/orbit/03.jpg" alt="space">
<figcaption class="orbit-caption">encapsulating</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="assets/img/orbit/04.jpg" alt="space">
<figcaption class="orbit-caption">outta world</figcaption>
</li>
</ul>
<nav class="orbit-bullets">
<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>
i haven't tested code here way web apps. change fields match web app:
<div class="orbit" role="region" aria-label="my web app slider" data-orbit>
<ul class="orbit-container">
<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=""}
{% in orbitslides.items -%}
<li class="{% if forloop.first == "true" -%}is-active {% endif -%}orbit-slide">
<img class="orbit-image" src="{{i.['image field']}}" alt="{{i.['alt text field']}}">
<figcaption class="orbit-caption">{{i.['my caption']}}</figcaption>
</li>
{% endfor -%}
</ul>
<nav class="orbit-bullets">
{module_webapps id="xxxx" filter="all" resultsperpage="10" hideemptymessage="true" rowcount="" collection="orbitbullets" template=""}
{% 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 items sorted same, believe work.
hope helps.
More discussions in Newbie Corner
adobe
Comments
Post a Comment