Foundation
-
FollowReplies
-
Orbit Foundation 6
byHossein Mahmoodi Friday, November 20, 2015 at 1:07 PM EST
<!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 ?