Menu icon Foundation
ZURB Foundation 6 / Orbit SlideShow bug?

Hi, everyone!

I got a problem with my orbit slides.

I'm using ZURB Foundation 6.2.3.

 

This is my template code: https://jsfiddle.net/Higli/p1bzsjtb/

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <ul 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>
    <li class="orbit-slide is-active">
      <img src="http://placehold.it/2000x750&text=1st">
    </li>
    <li class="orbit-slide">
      <img src="http://placehold.it/2000x750&text=2nd">
    </li>
    <li class="orbit-slide">
      <img src="http://placehold.it/2000x750&text=3nd">
    </li>
    <li class="orbit-slide">
      <img src="http://placehold.it/2000x750&text=4nd">
    </li>
  </ul>
</div>
<script>
    Foundation.Orbit.defaults.timerDelay = 10;
    $(document).foundation();

    setTimeout(function(){
        $(".orbit").hide();
    }, 2000);

    setTimeout(function(){
        $(".orbit").show(); // .orbit don't worked!
    }, 3000);
</script>
</body>

My problem is that when .orbit change the CSS .orbit {display: none} and after a while to get it back .orbit {display: block}, the slideshow don't working.

How fix it?

ps: sorry for my bad English.

foundation 6F6Orbitslidercarouseljavascriptjstransition

Hi, everyone!

I got a problem with my orbit slides.

I'm using ZURB Foundation 6.2.3.

 

This is my template code: https://jsfiddle.net/Higli/p1bzsjtb/

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <ul 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>
    <li class="orbit-slide is-active">
      <img src="http://placehold.it/2000x750&text=1st">
    </li>
    <li class="orbit-slide">
      <img src="http://placehold.it/2000x750&text=2nd">
    </li>
    <li class="orbit-slide">
      <img src="http://placehold.it/2000x750&text=3nd">
    </li>
    <li class="orbit-slide">
      <img src="http://placehold.it/2000x750&text=4nd">
    </li>
  </ul>
</div>
<script>
    Foundation.Orbit.defaults.timerDelay = 10;
    $(document).foundation();

    setTimeout(function(){
        $(".orbit").hide();
    }, 2000);

    setTimeout(function(){
        $(".orbit").show(); // .orbit don't worked!
    }, 3000);
</script>
</body>

My problem is that when .orbit change the CSS .orbit {display: none} and after a while to get it back .orbit {display: block}, the slideshow don't working.

How fix it?

ps: sorry for my bad English.

Rafi Benkual almost 3 years ago

Are you trying to hide the whole Orbit carousel then show it again?

You may need to reinitialize it after you show it.

Zackery Gianotti almost 3 years ago

Move 

Foundation.Orbit.defaults.timerDelay = 10;

To the bottom. (Line 11.)

Is that what you are trying to do?

 

$(document).foundation();

setTimeout(function(){
	$(".orbit").hide();
}, 2000);

setTimeout(function(){
	$(".orbit").show();
}, 3000);

Foundation.Orbit.defaults.timerDelay = 10;