Menu icon Foundation
Can Orbit be used as a carousel?

Hi,

I added an image carousel called bxSlider to a website using Foundation and it won't work in IE, although it works fine in Chrome and Firefox. Can the Orbit slider be used as a carousel? If not, does anyone know of an image carousel that will work with the Foundation framework?

carouselsliderIEOrbit

Hi,

I added an image carousel called bxSlider to a website using Foundation and it won't work in IE, although it works fine in Chrome and Firefox. Can the Orbit slider be used as a carousel? If not, does anyone know of an image carousel that will work with the Foundation framework?

Mihai Stroe almost 4 years ago

I've just added "timer: false" to the Orbit ul and it now functions as a carousel like so

<ul data-orbit data-options="timer: false">

Brian Downey almost 4 years ago

Thanks Mihai. I understand what you've done but I want to display several images at once and then click to move to the next set of images.

Mihai Stroe almost 4 years ago

Not sure this would work but maybe try loading more images in one li?
HTML
<ul data-orbit data-options="timer: false">
<li>
<img />
<img />
<img />
</li>
</ul>

I'm thinking this might squeeze the images into the orbit view though.

Paul Elphick almost 4 years ago

In addition to Orbit I have also used Cycle2 successfully within the F5 framework. Orbit is pretty versatile but Cycle2 opens up even more possibilities and in my experience to date I haven't come across any difficulties integrating the two.

Jeremy Englert almost 4 years ago

You can achieve a similar effect by using the orbit content slider.

http://foundation.zurb.com/docs/components/orbit.html

Brent Ransom over 3 years ago

If you are working with WordPress you could order the first slide of posts DESC and then the next slide you could order your posts ASC.

Example code:

<ul class="example-orbit-content" data-orbit>
  <li data-orbit-slide="headline-1">
    <div>
      <?php
        $postslist = get_posts('numberposts=4&order=DESC&orderby=date');
        foreach ($postslist as $post) :
        setup_postdata($post);
      ?>
      <div class="large-3 medium-3 small-12 columns">
        <div class="item">
          <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
          <?php the_post_thumbnail(); ?>
          <?php the_time(get_option('date_format')) ?>
          <?php the_excerpt(); ?>
        </div>
        </div>
          <?php endforeach; ?>
            </div>
          </li>
          <li data-orbit-slide="headline-1">
            <div>
          <?php
            $postslist = get_posts('numberposts=4&order=ASC&orderby=date');
            foreach ($postslist as $post) :
            setup_postdata($post);
          ?>
          <div class="large-3 medium-3 small-12 columns">
            <div class="item">
              <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
              <?php the_post_thumbnail(); ?>
              <?php the_time(get_option('date_format')) ?>
              <?php the_excerpt(); ?>
            </div>
          </div>
          <?php endforeach; ?>
            </div>
          </li>  
        </ul>```
Hope this helps.

Grant O'Neill over 3 years ago

I'm sure this could be achieved primarily with CSS. For example, make the Orbit container twice the width of your image to display two images. Change the opacity settings for images/captions etc. I haven't tested that idea at all but I think it could work.

Jane Zhang over 2 years ago

Yes, Orbit can be used as a carousel by setting the timer to false and nesting , like

HTML

       <ul data-orbit data-options="timer: false">
                <li>
                    <ul class="inline-list">
                      <li><img></li>
                      <li><img></li>
                      <li><img></li>
                      <li><img></li>
                    </ul>
                </li>
            </ul>

It works great!

Jonathan Urban over 2 years ago

If you search a good alternative to Orbit in order to create an Carousel, I suggest you OWL Carousel.
Here is my demo: http://picotto-wp.urbanjonathan.com/image-gallery/

See you
Jonathan.