Menu icon Foundation
Orbit Slider stops when pointer hovers on image

I'm just getting going with Foundation 6 and have found that the slider stops sliding when the pointer is on the sliding part of the page. This effectively means that it doesn't work at all in a small viewport as the slider takes up the whole of the viewport at that size. If in full screen I move the pointer out of the slider then it starts working again. Is there a simple fix for this?

<div class="row">
<div class="large-12 columns">
<div class="orbit" role="region" aria-label="Favorite urban Fringe Pictures" data-orbit>
  <ul class="orbit-container">
    <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
    <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
    <li class="is-active orbit-slide">
   <div class="row">
    <div class= "large-6 columns">
        <img src="img/IMG_1473.jpg" alt="slide 1" />
        </div>
        <div class= "large-6 columns">
        <h3 class="text-center">A Safe Harbour</h3>
        <p class="text-center">Some text</p>
        <br />
        <p>A load more text</p>
        </div>
        <div class="clearfix"></div>
        </div>
      
    </li>
    <li class="orbit-slide">
    <div class="row">
      <div class= "large-6 columns">
        <img src="img/IMG_1530.jpg" alt="slide 2" />
        </div>
        <div class= "large-6 columns">
        <h3 class="text-center">A Safe Harbour</h3>
        <p class="text-center">Some text</p>
        <br />
        <p>A load more text</p>
        </div>  
      </div>
    </li>
    <li class="orbit-slide">
    <div class="row">
    <div class= "large-6 columns">
        <img src="img/IMG_1531.jpg" alt="slide 3" />
        </div>
        <div class= "large-6 columns">
        <h3 class="text-center">A Safe Harbour</h3>
        <p class="text-center">Some text</p>
        <br />
        <p>A load more text</p>
        </div>
     </div>
    </li>
    <li class="orbit-slide">
    <div class="row">
    <div class= "large-6 columns">
        <img src="img/IMG_1535.jpg" alt="slide 4" />
        </div>
        <div class= "large-6 columns">
        <h3 class="text-center">A Safe Harbour</h3>
        <p class="text-center">Some text</p>
        <br />
        <p>A load more text</p>
        </div>
     </div>
    </li>
  </ul>
  <div class="clearfix"></div>
  <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>
            

         

Orbitfoundation 6

I'm just getting going with Foundation 6 and have found that the slider stops sliding when the pointer is on the sliding part of the page. This effectively means that it doesn't work at all in a small viewport as the slider takes up the whole of the viewport at that size. If in full screen I move the pointer out of the slider then it starts working again. Is there a simple fix for this?

<div class="row">
<div class="large-12 columns">
<div class="orbit" role="region" aria-label="Favorite urban Fringe Pictures" data-orbit>
  <ul class="orbit-container">
    <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
    <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
    <li class="is-active orbit-slide">
   <div class="row">
    <div class= "large-6 columns">
        <img src="img/IMG_1473.jpg" alt="slide 1" />
        </div>
        <div class= "large-6 columns">
        <h3 class="text-center">A Safe Harbour</h3>
        <p class="text-center">Some text</p>
        <br />
        <p>A load more text</p>
        </div>
        <div class="clearfix"></div>
        </div>
      
    </li>
    <li class="orbit-slide">
    <div class="row">
      <div class= "large-6 columns">
        <img src="img/IMG_1530.jpg" alt="slide 2" />
        </div>
        <div class= "large-6 columns">
        <h3 class="text-center">A Safe Harbour</h3>
        <p class="text-center">Some text</p>
        <br />
        <p>A load more text</p>
        </div>  
      </div>
    </li>
    <li class="orbit-slide">
    <div class="row">
    <div class= "large-6 columns">
        <img src="img/IMG_1531.jpg" alt="slide 3" />
        </div>
        <div class= "large-6 columns">
        <h3 class="text-center">A Safe Harbour</h3>
        <p class="text-center">Some text</p>
        <br />
        <p>A load more text</p>
        </div>
     </div>
    </li>
    <li class="orbit-slide">
    <div class="row">
    <div class= "large-6 columns">
        <img src="img/IMG_1535.jpg" alt="slide 4" />
        </div>
        <div class= "large-6 columns">
        <h3 class="text-center">A Safe Harbour</h3>
        <p class="text-center">Some text</p>
        <br />
        <p>A load more text</p>
        </div>
     </div>
    </li>
  </ul>
  <div class="clearfix"></div>
  <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>
            

         
Max Drake almost 4 years ago

Well, I seem to have sorted this with:

<div class="orbit" role="region" aria-label="Favorite urban Fringe Pictures" data-options="pauseOnHover:false" data-orbit>