Menu icon Foundation
Form inside Orbit content slider

We want to put a form inside and Orbit content slider...

It's all good but when the form field is clicked to fill in the form, the slide changes. Is there a way I can stop the slider to moment someone starts to fill in the form?

Orbitforms

We want to put a form inside and Orbit content slider...

It's all good but when the form field is clicked to fill in the form, the slide changes. Is there a way I can stop the slider to moment someone starts to fill in the form?

Rafi Benkual almost 6 years ago

You can use data-options attribute:

<ul data-orbit
    data-options="next_on_click: false;">
</ul>

Jon Sharpe almost 6 years ago

I really appreciate your reply, but that does not seem to work, and the docs do not seem to list next_on_click as an available setting... http://foundation.zurb.com/docs/components/orbit.html

Eric almost 6 years ago

What does your code look like so far?

I have a form that hovers over my Orbit slider and I don't have the issue you're having.

Have you tried adjusting the z-index of the form?

Jerick Tibule over 5 years ago

Hello there,

I am having the same problem.

I have a registration form inside one of the in an orbit slider. When I type in something like my email address, etc... the slide does not pause and goes to the next slide.

Here is a sample code:

<ul class="hero-slider" data-orbit data-options="
swipe: true;
pause_on_hover: true;
slide_number: false;
bullets: true;
timer: true;
timer_speed:5000;
">

<li> 
<h1>Stuff</h1>
</li>
<li>
<h1>Stuff</h1>
<form>
<div class="email-field">
<input type="email" placeholder="Email Address" required>
</div>
<div class="password-field">
<input type="password" id="password" placeholder="Password" required pattern="password">
</div>
<div class="password-confirmation-field">
<input type="password" required placeholder="Confirm Password" pattern="password" data-equalto="password">
</div>
</form>
</li>
<li>
<h1>Stuff</h1>
</li>

</ul>

I noticed that what orbit does is it toggles "pause" on click. So if I click on input once it pauses but will play again when clicking on the next input.

Fernanda Parisi over 5 years ago

I'm also experiencing this issue.
I have three radio inputs and, even by using next_on_click:false on data-options or straight on JS, the slide changes as soon as a selection is made.

I also noticed that this only happens if I use the data-orbit-slide option on any of my Orbit's LIs.

Here is a snippet of my code:

<ul class="quiz-questions" data-orbit data-options="next_on_click:false">
  <li class="quiz-intro active">
    <p>Intro text</p>
    <a data-orbit-link="quiz-question_1" class="small button">Start</a>
  </li>
  <li class="quiz-question_1" data-orbit-slide="quiz-question_1">
    <input type="radio" name="question_1" id="q1-a1" /> 
    <label for="q1-a1">Answer 1</label>
    <input type="radio" name="question_1" id="q1-a2" /> 
    <label for="q1-a2">Answer 2</label>
    <input type="radio" name="question_1" id="q1-a3" /> 
    <label for="q1-a3">Answer 3</label>
  </li>
  <li class="quiz-question_2">
    <p>Quiz end</p>
  </li>
</ul>

Jerick Tibule over 5 years ago

Hi Fernanda,

I fixed my problem by going inside foundation.orbit.js and added the code below:

$('input').focus(function() {
    timer.stop();
});

It will not work if you have
Javascript
<script src="bower_components/foundation/js/foundation.js"></script>
or <script src="bower_components/foundation/js/foundation.min.js"></script>

set in your scripts area in index. You need to remove this and add each script that you need in the
bower_components/foundation/js/foundation folder. only with the change added in the foundation.orbit.js file in this folder will it work.

Cheers,