Menu icon Foundation
weird orbit slider problem

dunno whats going on with my image slider under the 'support' tab its not showing up correctly, its cutting half of it off and looking weird. The main image slider is good. But when you inspect element all of a sudden the 'support' image slider looks good.

heres a link to see:
http://www.omegadesignla.com/virtual/

and some html:

<div class="content" id="panel6">
   <div class="row">
       <div class="large-4 columns">
           <h3> OFLVS Contact Info:</h3>

<ul>
   <li>Student Support</li>
    
    <li>Parent Support</li>
    
    <li>Support links and resources</li>
</ul>

       </div>
       <div class="large-8 columns">
          <ul class="example-orbit" data-orbit>
              <li>
                <img src="imgs/flash3.jpg" alt="slide 1" />
                <div class="orbit-caption">
                  Caption One.
                </div>
              </li>
              <li>
                <img src="imgs/flash12.jpg" alt="slide 2" />
                <div class="orbit-caption">
                  Caption Two.
                </div>
              </li>
              <li>
                <img src="imgs/flash9.jpg" alt="slide 3" />
                <div class="orbit-caption">
                  Caption Three.
                </div>
              </li>
        </ul>
       </div>
   </div>
   <a href="#" class="button info round">Learn More</a>
   <a href="#" class="button success round">Sign Up</a>
  </div>
            

         

Orbit

dunno whats going on with my image slider under the 'support' tab its not showing up correctly, its cutting half of it off and looking weird. The main image slider is good. But when you inspect element all of a sudden the 'support' image slider looks good.

heres a link to see:
http://www.omegadesignla.com/virtual/

and some html:

<div class="content" id="panel6">
   <div class="row">
       <div class="large-4 columns">
           <h3> OFLVS Contact Info:</h3>

<ul>
   <li>Student Support</li>
    
    <li>Parent Support</li>
    
    <li>Support links and resources</li>
</ul>

       </div>
       <div class="large-8 columns">
          <ul class="example-orbit" data-orbit>
              <li>
                <img src="imgs/flash3.jpg" alt="slide 1" />
                <div class="orbit-caption">
                  Caption One.
                </div>
              </li>
              <li>
                <img src="imgs/flash12.jpg" alt="slide 2" />
                <div class="orbit-caption">
                  Caption Two.
                </div>
              </li>
              <li>
                <img src="imgs/flash9.jpg" alt="slide 3" />
                <div class="orbit-caption">
                  Caption Three.
                </div>
              </li>
        </ul>
       </div>
   </div>
   <a href="#" class="button info round">Learn More</a>
   <a href="#" class="button success round">Sign Up</a>
  </div>
            

         
Rafi Benkual about 4 years ago

Try adding

 $(document).foundation();

Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.

 $(document).foundation('orbit', 'reflow');