How to initialize Foundation 6 Javascript correctly?

Question

my Javascript of Foundation is not working. I think my initialization is wrong. Can anyone help me?

var jQ = $.noConflict();
jQ(document).foundation();

jQ(document).ready(function($){
    var orbit = new Foundation.Orbit($('#slider'), {animation: 'fade',
        timerDelay: 8000,
        pauseOnHover: true,
        navButtons: false,
        bullets: false
    });
});

Bob van Luijt · Accepted Answer · 2015-11-29 23:19:17Z

1

Note that you shouldn't set it through JS like this but rather in your HTML in the data-options, more info.

Example:

<div class="orbit" role="region" data-orbit data-options="timerDelay:5000; pauseOnHover:true;navButtons:false;bullets:false;">
...
</div>

You can find specific information for Foundation 6 here: http://foundation.zurb.com/sites/docs/orbit.html

edited Nov 29, 2015 at 23:19

answered Nov 29, 2015 at 16:27

Bob van Luijt

7,67815 gold badges64 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Wolfgang Müller Over a year ago

yes. I have the right html, but i want to change the settings because i have different sliders on the page

Wolfgang Müller Over a year ago

Hi Thanks, But nothing changed. There are still buttons and navButtons. Because I have $.noConflict(). Could that be the error there?

Wolfgang Müller Over a year ago

Okay. Here is it. It´s for an ebaytheme. The javascript is loading asynchron. jsbin.com/cadazuvosi/edit?html,css,js,output

Wolfgang Müller · Accepted Answer · 2015-11-30 07:22:45Z

That´s my code. No Change :/

<div id="slider" class="orbit" role="region" data-options="navButtons:false; autoPlay:false" data-orbit>
    <ul class="orbit-container">

        <li class="orbit-slide is-active">
            <img src="http://placehold.it/2000x750&text=1st">
        </li>
        <li class="orbit-slide">
            <img src="http://placehold.it/2000x750&text=2nd">
        </li>
        <li class="orbit-slide">
            <img src="http://placehold.it/2000x750&text=3nd">
        </li>
        <li class="orbit-slide">
            <img src="http://placehold.it/2000x750&text=4nd">
        </li>
    </ul>
</div>

Collectives™ on Stack Overflow

How to initialize Foundation 6 Javascript correctly?

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related