Foundation
-
FollowReplies
-
Can Orbit be used as a carousel?
byBrian Downey Thursday, December 12, 2013 at 11:58 AM EST
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?
Jane Zhang
over 4 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!
Grant O'Neill
over 5 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.
Brent Ransom
over 5 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.
Jeremy Englert
almost 6 years ago
You can achieve a similar effect by using the orbit content slider.
Paul Elphick
almost 6 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.
Mihai Stroe
almost 6 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.
Brian Downey
about 6 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
about 6 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">
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.