-
Feb 8th, 2017, 10:18 AM
#1
Foundation 6 - Orbit and Sticky Issues
I have the following code:
Code:
<div class="orbit" role="region" aria-label="Slideshow" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
<li class="is-active orbit-slide">
<img class="orbit-image" src="..." alt="Slide 1">
<figcaption class="orbit-caption">Bounce Houses</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="..." alt="Slide 2">
<figcaption class="orbit-caption">Slides</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="..." alt="Slide 3">
<figcaption class="orbit-caption">Combos</figcaption>
</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>
</nav>
</div>
<!-- And -->
<div class="row">
<div class="columns large-12" data-sticky-container>
<div class="sticky" data-sticky data-stick-to="bottom">
<nav role="navigation">
<ul class="breadcrumbs">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">FAQ & Tips</a>
</li>
<li>
<a href="#">Terms of Service</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
And I'm using the following CDNs:
Foundation: https://cdn.jsdelivr.net/foundation/...dation.min.css and https://cdn.jsdelivr.net/foundation/...ndation.min.js
JQuery: https://ajax.aspnetcdn.com/ajax/jQue...y-3.1.1.min.js
However, whenever I try to debug my code, I have two issues:
- The orbit will only allow me to navigate left or right once, then nothing happens if I click a navigation again.
- The sticky doesn't work at all.
I'm not sure what is causing the issue though. Also, I'm not sure if the sticky is what I'm after. The behavior that I want is for the footer to appear after the last bit of content, but if the last bit of content doesn't give the browser a vertical scroller then I want it to be at the very bottom.
What is odd is if I use CodePen, with the same external links, the neither the orbit nor the sticky work at all.
Fiddle: http://codepen.io/anon/pen/dNqpjz
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|