CODEWITHSUNDEEP
htmlcsszurb-foundation
missxcurious
missxcurious

Reputation: 61

Foundation Orbit image slider not functioning properly?

Alright, so I'm trying to use Foundations Orbit media container. I'm better with HTML/CSS with virtually not experience with JS. BUT! To find an autoplay CSS/HTML only image slider is...impossible. Or expensive. Anyway, I'm trying to use the Orbit one off the Foundation Docs page, but I think I messed it up. Can anyone help me? Here's the code snippets:

HMTL 

  <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>

Here's the CSS. This isn't the full CSS, but I'm pretty sure I'm identifying the Orbit HTML wrong. My fried mind just can't comprehend it right now.

/* Orbit Graceful Loading */
.slideshow-wrapper {
  position: relative; }
  .slideshow-wrapper ul {
    list-style-type: none;
    margin: 0; }
    .slideshow-wrapper ul li,
    .slideshow-wrapper ul li .orbit-caption {
      display: none; }
    .slideshow-wrapper ul li:first-child {
      display: block; }
  .slideshow-wrapper .orbit-container {
    background-color: transparent; }
    .slideshow-wrapper .orbit-container li {
      display: block; }
      .slideshow-wrapper .orbit-container li .orbit-caption {
        display: block; }
    .slideshow-wrapper .orbit-container .orbit-bullets li {
      display: inline-block; }
  .slideshow-wrapper .preloader {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border: solid 3px;
    border-color: #555555 white;
    border-radius: 1000px;
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }

.orbit-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  background: none; }
  .orbit-container .orbit-slides-container {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-transform: translateZ(0); }
    .orbit-container .orbit-slides-container img {
      display: block;
      max-width: 100%; }
    .orbit-container .orbit-slides-container > * {
      position: absolute;
      top: 0;
      width: 100%;
      margin-left: 100%; }
      .orbit-container .orbit-slides-container > *:first-child {
        margin-left: 0%; }
      .orbit-container .orbit-slides-container > * .orbit-caption {
        position: absolute;
        bottom: 0;
        background-color: rgba(51, 51, 51, 0.8);
        color: white;
        width: 100%;
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem; }

I put all the JS files in my HTML file as it told me to...I'm not certain where to go from here.

Upvotes: 0

Views: 1476

Answers (1)

squashriddle
squashriddle

Reputation: 176

It appears that you are missing the 'data-orbit' element that is necessary to initialize the orbit scripts.

<ul data-orbit></ul>

It's difficult to say if this is the only issue without a working example, but this would be the most obvious place to start.

Zurb has useful documentation on setting this up. http://foundation.zurb.com/docs/components/orbit.html

As mentioned in the Foundation documentation, orbit has been deprecated; it will still work in newer versions however.

Slick carousel is super simple to set up, and free if you wanted to try an alternate image slider.

http://kenwheeler.github.io/slick/

Hope this helps.

Upvotes: 1

Related Questions