Menu icon Foundation
F6 Orbit Slider

Hi,

Trying to use the brand new Orbit slider, but had some issues.
Just want to animate images with a fade out, like this :

$(document).foundation();

$options = {
	animation: 'fade',
    timerDelay: 500,
    pauseOnHover: false,
    navButtons: false,
    bullets: false
};

var orbitSlider = new Foundation.Orbit($('.orbit'), $options);
            

         

My slides are... sliding, not fading.
Here's my markup :

<div class="orbit" role="region" aria-label="orbit-imgs" data-orbit>
        
        <ul class="orbit-container">

    		<li class="is-active orbit-slide">
				<img src="images/014.jpg" alt="orbit-imgs">
			</li>
			<li class="orbit-slide">
				<img src="images/017.jpg" alt="orbit-imgs">
			</li>
			<li class="orbit-slide">
				<img src="images/02.jpg" alt="orbit-imgs">
			</li>
			<li class="orbit-slide">
				<img src="images/04.jpg" alt="orbit-imgs">
			</li>

        </ul>

    </div>
            

         

Can anyone help me ?

I tried to use 'animInFromRight', 'animOutToRight', ..., options but it freezed JS.

Thanks

Orbitjavascript

Hi,

Trying to use the brand new Orbit slider, but had some issues.
Just want to animate images with a fade out, like this :

$(document).foundation();

$options = {
	animation: 'fade',
    timerDelay: 500,
    pauseOnHover: false,
    navButtons: false,
    bullets: false
};

var orbitSlider = new Foundation.Orbit($('.orbit'), $options);
            

         

My slides are... sliding, not fading.
Here's my markup :

<div class="orbit" role="region" aria-label="orbit-imgs" data-orbit>
        
        <ul class="orbit-container">

    		<li class="is-active orbit-slide">
				<img src="images/014.jpg" alt="orbit-imgs">
			</li>
			<li class="orbit-slide">
				<img src="images/017.jpg" alt="orbit-imgs">
			</li>
			<li class="orbit-slide">
				<img src="images/02.jpg" alt="orbit-imgs">
			</li>
			<li class="orbit-slide">
				<img src="images/04.jpg" alt="orbit-imgs">
			</li>

        </ul>

    </div>
            

         

Can anyone help me ?

I tried to use 'animInFromRight', 'animOutToRight', ..., options but it freezed JS.

Thanks

Brian Tan almost 3 years ago

After $(document).foundation() is called, orbit plugin is initialized and options are not changeable. If possible, initialize orbit beforehand, Or destroy the plugin and reinitialize again with new options.

var orbitSlider = new Foundation.Orbit($('.orbit'));
orbitSlider.destroy();
orbitSlider = new Foundation.Orbit($('.orbit'), $options);

Wlad almost 3 years ago

Thanks for the answer,
Sorry but it didn't make it. It hides Orbit.

But I think my mistake was to focus on the 'fade' option. The other options are working.

Everything's worked fine except for the animation I wanted to initialize.

shaquel almost 3 years ago

` <ul data-options="animation:fade;" class="example-orbit-content" data-orbit>

<li data-orbit-slide="headline-1">
    <div>

        <img src="Img/jet2.jpg"  alt="Private Jets">

        <div style="background-color:#333344; color:orange;"  class="orbit-caption"><center>Keleca Air</center></div>

    </div>
  </li>
</ul>

shaquel almost 3 years ago

Now i need help with a ken burns effect on the image slider lol so you can help me there in return thanks

Wlad almost 3 years ago

Sorry shaquel,

But your example doesn't work. Is it F6 ?

Will Moody almost 3 years ago

Hi I had a similar issue and with help managed to get going using the js below, either give your rbit an ID or change ("#test") to (".orbit")

/-- orbit --/
Foundation.Orbit.defaults.animInFromLeft = "fade-in";
Foundation.Orbit.defaults.animInFromRight = "fade-in";
Foundation.Orbit.defaults.animOutToLeft = "fade-out";
Foundation.Orbit.defaults.animOutToRight = "fade-out";
Foundation.Orbit.defaults.timerDelay = 15000;
$("#test").foundation();

/-- foundation-call --/
$(document).foundation();
```

Rafi Benkual almost 3 years ago

@Brian Tan That's solid advice I think if someone is generating the plugin after page load.

@Will Moody Thanks for sharing! I'd like to get that example in the docs or perhaps add a tutorial around it. https://github.com/zurb/foundation-sites/issues/8117

It's also something that can be edited in the data-options.

Brian Tan almost 3 years ago

@Wlad I'm sorry, destroy and reinit works on dropdownMenu, equalizer, but somehow does not work on orbit. My mistake.

Anyway, option animate do not seem to be valid for F6. The following works:

  $options = {
    animInFromLeft: 'fade-in',
    animInFromRight: 'fade-in',
    animOutToLeft: 'fade-out',
    animOutToRight: 'fade-out',
    timerDelay: 3000,
    pauseOnHover: false,
    navButtons: false,
    bullets: false
  };

  var orbitSlider = new Foundation.Orbit($('.orbit'),$options);