Hey there, I've been experimenting with Foundations Orbit media container to create an autoplay image slider using HTML and CSS. While I'm more comfortable with HTML/CSS than JavaScript, I have struggled to find a simple and cost-effective solution for this. So, I decided to try out the Orbit feature from the Foundation Docs page, but it seems like I may have made some mistakes along the way. Can someone lend me a hand? Here are the relevant code snippets:
HTML
<div class="row">
<div class="large-12 columns">
<div class="panel">
<div class="orbit-container">
<ul>
<li>
<img src="assets/infinity.png" alt="slide 1" />
</li>
<li class="active">
<img src="assets/Image1.png" alt="slide 2" />
</li>
<li>
<img src="assets/image2.png" alt="slide 3" />
</li>
</ul>
</div>
CSS file snippet:
<p>Here's the CSS.</p>
<pre><code>/* Orbit Graceful Loading */
.slideshow-wrapper {
position: relative;
}
... (remaining CSS code is similar to original)
I attempted to follow the instructions by including all required JS files in my HTML document, but I seem to be stuck at this point. Any guidance would be greatly appreciated.