3 Replies Latest reply on Apr 25, 2016 4:22 AM by Carla@home

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

    Carla@home Level 2

      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>

      <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>&#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="assets/img/orbit/01.jpg" alt="Space">

            <figcaption class="orbit-caption">Space, the 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 This 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>

        • 1. Re: Foundation6 Orbit Slider: how to show slides with bullets when using a web app
          Lynda-S Level 4

          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:

           

          <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>&#9664;&#xFE0E;</button>

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

             

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

          {% for i 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=""}

          {% 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.

          1 person found this helpful
          • 2. Re: Foundation6 Orbit Slider: how to show slides with bullets when using a web app
            Carla@home Level 2

            Hi Linda,

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

            Krgds, Carla

            • 3. Re: Foundation6 Orbit Slider: how to show slides with bullets when using a web app
              Carla@home Level 2

              Hi Linda,

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

              Krgds Carla