-
Replies
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?
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,
You can use data-options attribute: