Menu icon Foundation
Foundation 6 Orbit question

Hi All,
I created an orbit slider without an issue, however I added a data-option="timer: false" to make the orbit as carousel.
My goal is to show a list of 4 images on the page and when a user click on next it will move to the next 4 images.
I am attaching the code, if any one can please help.
Thank you
Roy

 <div class="orbit" role="region" aria-label="Categories Slider" data-orbit data-use-m-u-i="true" data-options="timer: false">
        <div class="orbit-container">
            <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
            <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
            <div class="orbit-slide is-active">
                <div>
                    <img src="//lorempixel.com/270/170/?gardening">
                    <strong>Gardening</strong>
            <div class="orbit-slide">
                <div><img src="//lorempixel.com/270/170/?trimming">
                <strong>Trimming</strong></div>
            <div class="orbit-slide">
                <div><img src="//lorempixel.com/270/170/?testing1">
                <strong>Testing1</strong></div>
            </div>
                </div>
                    </div>
                </div>
            <div class="orbit-slide">
                <div><img src="//lorempixel.com/270/170/?testing2">
                <strong>Testing2</strong></div>
            </div>
            <div class="orbit-slide">
                <div><img src="//lorempixel.com/270/170/?testing3">
                <strong>Testing3</strong></div>
            </div>
            <div class="orbit-slide">
                <div><img src="//lorempixel.com/270/170/?testing4">
                <strong>Testing4</strong></div>
            </div>
        </div>
        <nav class="orbit-bullets">
            <button class="is-active" data-slide="0"></button>
            <button data-slide="1"></button>
            <button data-slide="2"></button>
            <button data-slide="3"></button>
            <button data-slide="4"></button>
            <button data-slide="5"></button>
        </nav>
    </div>
</div>
            

         

foundation 6Orbit

Hi All,
I created an orbit slider without an issue, however I added a data-option="timer: false" to make the orbit as carousel.
My goal is to show a list of 4 images on the page and when a user click on next it will move to the next 4 images.
I am attaching the code, if any one can please help.
Thank you
Roy

 <div class="orbit" role="region" aria-label="Categories Slider" data-orbit data-use-m-u-i="true" data-options="timer: false">
        <div class="orbit-container">
            <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
            <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
            <div class="orbit-slide is-active">
                <div>
                    <img src="//lorempixel.com/270/170/?gardening">
                    <strong>Gardening</strong>
            <div class="orbit-slide">
                <div><img src="//lorempixel.com/270/170/?trimming">
                <strong>Trimming</strong></div>
            <div class="orbit-slide">
                <div><img src="//lorempixel.com/270/170/?testing1">
                <strong>Testing1</strong></div>
            </div>
                </div>
                    </div>
                </div>
            <div class="orbit-slide">
                <div><img src="//lorempixel.com/270/170/?testing2">
                <strong>Testing2</strong></div>
            </div>
            <div class="orbit-slide">
                <div><img src="//lorempixel.com/270/170/?testing3">
                <strong>Testing3</strong></div>
            </div>
            <div class="orbit-slide">
                <div><img src="//lorempixel.com/270/170/?testing4">
                <strong>Testing4</strong></div>
            </div>
        </div>
        <nav class="orbit-bullets">
            <button class="is-active" data-slide="0"></button>
            <button data-slide="1"></button>
            <button data-slide="2"></button>
            <button data-slide="3"></button>
            <button data-slide="4"></button>
            <button data-slide="5"></button>
        </nav>
    </div>
</div>
            

         

This post has been closed. No new replies can be added.

Brian Tan over 3 years ago

data-options="autoPlay:false;", put the group of 4 images in a row. But checkout "multiple-item" in Slick carousel http://kenwheeler.github.io/slick/

<div class="orbit" data-orbit data-options="autoPlay: false">
  <div class="orbit-container">
      <button class="orbit-previous">&#9664;</button>
      <button class="orbit-next">&#9654;</button>
      <div class="orbit-slide is-active">
        <div class="row">
          <div class="small-3 column">
              <img src="//lorempixel.com/270/170/?gardening">
              <strong>Gardening</strong>
          </div>
          <div class="small-3 column">
            <img src="//lorempixel.com/270/170/?trimming">
            <strong>Trimming</strong>
          </div>
          <div class="small-3 column">
            <img src="//lorempixel.com/270/170/?testing1">
            <strong>Testing1</strong>
          </div>
          <div class="small-3 column">
            <img src="//lorempixel.com/270/170/?testing2">
            <strong>Testing2</strong>
          </div>
        </div>
      </div> 
      <div class="orbit-slide ">
        <div class="row">
          <div class="small-3 column">
              <img src="//lorempixel.com/270/170/?gardening">
              <strong>Hello 1</strong>
          </div>
          <div class="small-3 column">
            <img src="//lorempixel.com/270/170/?trimming">
            <strong>Hello 2</strong>
          </div>
          <div class="small-3 column">
            <img src="//lorempixel.com/270/170/?testing1">
            <strong>Hello 3</strong>
          </div>
          <div class="small-3 column">
            <img src="//lorempixel.com/270/170/?testing2">
            <strong>Hello 4</strong>
          </div>
        </div>
      </div>
  </div>
  <nav class="orbit-bullets">
      <button class="is-active" data-slide="0"></button>
      <button data-slide="1"></button>
  </nav>
</div>

Roy Finaly over 3 years ago

Brian,
Thank you very much for the help, it works perfect now, I did the slider with slick as well.
Roy

Rafi Benkual over 3 years ago

Nice!