Menu icon Foundation
Orbit Foundation 6

<!doctype HTML>
   <html>
    
    <head>
        <link rel="stylesheet" href="css/foundation.css">
        <script src="js/foundation.min.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script src="js/foundation.orbit.js"></script>
        <script src="js/foundation.core.js"></script>
        <script src="js/foundation.util.motion.js"></script>
        <script src="js/foundation.util.keyboard.js"></script>
    </head>
    
    <body>
    
     <div class="row" role="Slider">
            <div class="columns small-12"  style="background-color:cyan">
            
            
                                <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="is-active orbit-slide">
                          <div>
                            <h3 class="text-center">You can also throw some text in here!</h3>
                            <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa     				 								</p>
                            <h3 class="text-center">This Orbit slide has chill</h3>
                          </div>
                        </li>
                        <li class="orbit-slide">
                          <div>
                            <h3 class="text-center">You can also throw some text in here!</h3>
                            <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
                            <h3 class="text-center">This Orbit slide has chill</h3>
                          </div>
                        </li>
                        <li class="orbit-slide">
                          <div>
                            <h3 class="text-center">You can also throw some text in here!</h3>
                            <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
                            <h3 class="text-center">This Orbit slide has chill</h3>
                          </div>
                        </li>
                        <li class="orbit-slide">
                          <div>
                            <h3 class="text-center">You can also throw some text in here!</h3>
                            <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
                            <h3 class="text-center">This Orbit slide has chill</h3>
                          </div>
                        </li>
                      </ul>
                      <nav class="orbit-bullets">
                       <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
                       <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
                       <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
                       <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
                     </nav>
                    </div>
            
            
            
            
            
            
            
            </div>
        </div>
        
        
        </body>
        
        </html>
            

         

Orbit

Hi,
i try to make a slider with orbit in foundation 6 and i provide all JS files to do this, but look to screenshot and it's noting!

i copy example code from foundation website!

how can i fix that to show correctly?!

thanks

OrbitF6

<!doctype HTML>
   <html>
    
    <head>
        <link rel="stylesheet" href="css/foundation.css">
        <script src="js/foundation.min.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script src="js/foundation.orbit.js"></script>
        <script src="js/foundation.core.js"></script>
        <script src="js/foundation.util.motion.js"></script>
        <script src="js/foundation.util.keyboard.js"></script>
    </head>
    
    <body>
    
     <div class="row" role="Slider">
            <div class="columns small-12"  style="background-color:cyan">
            
            
                                <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="is-active orbit-slide">
                          <div>
                            <h3 class="text-center">You can also throw some text in here!</h3>
                            <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa     				 								</p>
                            <h3 class="text-center">This Orbit slide has chill</h3>
                          </div>
                        </li>
                        <li class="orbit-slide">
                          <div>
                            <h3 class="text-center">You can also throw some text in here!</h3>
                            <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
                            <h3 class="text-center">This Orbit slide has chill</h3>
                          </div>
                        </li>
                        <li class="orbit-slide">
                          <div>
                            <h3 class="text-center">You can also throw some text in here!</h3>
                            <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
                            <h3 class="text-center">This Orbit slide has chill</h3>
                          </div>
                        </li>
                        <li class="orbit-slide">
                          <div>
                            <h3 class="text-center">You can also throw some text in here!</h3>
                            <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
                            <h3 class="text-center">This Orbit slide has chill</h3>
                          </div>
                        </li>
                      </ul>
                      <nav class="orbit-bullets">
                       <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
                       <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
                       <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
                       <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
                     </nav>
                    </div>
            
            
            
            
            
            
            
            </div>
        </div>
        
        
        </body>
        
        </html>
            

         

Orbit

Hi,
i try to make a slider with orbit in foundation 6 and i provide all JS files to do this, but look to screenshot and it's noting!

i copy example code from foundation website!

how can i fix that to show correctly?!

thanks

amandine almost 4 years ago

I'm having issues with orbit too.
Is the online version at foundation.zurb.com still broken ?

Chris Oyler almost 4 years ago

If you install via bower/npm foundation.min.js works, if you download a copy from foundation.zurb.com it will not work... yet. Our customizer/zip packager is undergoing fixes. Sorry for the inconvenience.

hassan almost 4 years ago

@Hossein Mahmoodi i dont think so but you can try it but according to me it will not resolve the issue

Hossein Mahmoodi almost 4 years ago

and if i used foundation.min.js for my final project how can to solve this issue ?!

hassan almost 4 years ago

its a problem within foundation.js so you just need to comment some code in foundation.js from line number 1573 to 1600

 function listeningElementsMutation(mutationRecordsList) {
        var $target = $(mutationRecordsList[0].target);
        //trigger the event handler for the element depending on type
        switch ($target.attr("data-events")) {

          case "resize" :
          $target.triggerHandler('resizeme.zf.trigger', [$target]);
          break;

          case "scroll" :
          $target.triggerHandler('scrollme.zf.trigger', [$target, window.pageYOffset]);
          break;

          // case "mutate" :
          // console.log('mutate', $target);
          // $target.triggerHandler('mutate.zf.trigger');
          //
          // //make sure we don't get stuck in an infinite loop from sloppy codeing
          // if ($target.index('[data-mutate]') == $("[data-mutate]").length-1) {
          //   domMutationObserver();
          // }
          // break;

          default :
          return false;
          //nothing
        }
      }

just comment it and it will work