Foundation 6 Orbit: Auto-Play deaktivieren - zurb-foundation, orbit

Ich möchte einen Orbit erstellen, der nicht automatisch abgespielt wird, und die Folie nur dann wechseln, wenn der Benutzer manuell auf den "nächsten" Link klickt.

Dokumente: https://foundation.zurb.com/sites/docs/orbit.html

Verwende ich Datenoptionen falsch?

<div class="orbit" role="region" data-orbit data-options="data-timer-delay:0; data-auto-play:false;">
<ul class="orbit-container">

<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>

<li class="is-active orbit-slide">
<img class="orbit-image" src="/images/https://foundation.zurb.com/sites/docs/assets/img/orbit/01.jpg" alt="Space">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="/images/https://foundation.zurb.com/sites/docs/assets/img/orbit/01.jpg" alt="Space">
</li>

</ul>
</div>

http://codepen.io/anon/pen/vyoRJz

Prost!

Antworten:

2 für die Antwort № 1

So habe ich es zum Laufen gebracht:

<div class="orbit" role="region" data-orbit data-auto-play="false">

1 für die Antwort № 2

Wie in der Foundation-Dokumentegibt es zwei Möglichkeiten, wie die Einstellungen im HTML definiert werden können:

  1. Als individuelles Datenattribut, wie Åsmund in seiner Antwort

    <div class="orbit" role="region" data-orbit data-auto-play="false">
    
  2. Oder zusammen in der data-options Attribut, wie dies

    <div class="orbit" role="region" data-orbit data-options="autoPlay:false; timerDelay:1000; bullets:false">
    

Im ersten Fall wird die Option in Bindestrichen notiert, während im zweiten Fall die Option camelCased notiert wird.


Am beliebtesten