问题
I am trying to use a script I found in this question to run Orbit in Foundation 3, but I can not get it to initialize properly. I added this script in the footer and Foundation.min.js in the header. I get a no method 'foundation' error on line 3 in my console it doesn't work.
回答1:
The script in that SO thread you linked to will not work for your because it uses Foundation 4. Orbit is initialized differetly in Foundation 3 (F3). So suppose you have an element with id orbitX
. You initialize it like this:
$("#orbitX").orbit();
In the other SO question you asked
where would you add additional settings?
You do it when you initialized your orbit element like this:
$("#orbitX").orbit({
bullets: false; // to hide the bullets
});
Here is the complete set of options
$('#orbitX').orbit({
animation: 'fade', // fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed: 800, // how fast animtions are
timer: true, // true or false to have the timer
resetTimerOnClick: false, // true resets the timer instead of pausing slideshow progress
advanceSpeed: 4000, // if timer is enabled, time between transitions
pauseOnHover: false, // if you hover pauses the slider
startClockOnMouseOut: false, // if clock should start on MouseOut
startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
directionalNav: true, // manual advancing directional navs
captions: true, // do you want captions?
captionAnimation: 'fade', // fade, slideOpen, none
captionAnimationSpeed: 800, // if so how quickly should they animate in
bullets: false, // true or false to activate the bullet navigation
bulletThumbs: false, // thumbnails for the bullets
bulletThumbLocation: '', // location from this file where thumbs will be
afterSlideChange: function(){}, // empty function
fluid: true // or set a aspect ratio for content slides (ex: '4x3')
});
来源:https://stackoverflow.com/questions/15980783/how-to-initialize-foundation-3-to-use-orbit