-
Replies
<!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>◀</button> <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>▶</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>
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
Chris Oyler
about 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
about 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
about 4 years ago
and if i used foundation.min.js for my final project how can to solve this issue ?!
hassan
about 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
I'm having issues with orbit too.
Is the online version at foundation.zurb.com still broken ?