Skip to content

Instantly share code, notes, and snippets.

@ProfeC
Last active December 14, 2015 14:48
Show Gist options
  • Save ProfeC/5103057 to your computer and use it in GitHub Desktop.
Save ProfeC/5103057 to your computer and use it in GitHub Desktop.
Here are a few settings that I've gotten to work with the new Orbit slider that is part of Zurb's Foundation 4.
$(document)
.foundation('orbit', {
animation_speed: 5
, bullets: false
, timer_speed: 1000
, stack_on_small: false
})
;
.orbit-container .orbit-prev, .orbit-container .orbit-next {
display:none
}
.orbit-container .orbit-timer {
background-color:pink; /* no homo */
}
.orbit-container .orbit-timer .orbit-progress {
background-color:purple;
}
.orbit-container .orbit-slide-number {
top:inherit; left:inherit; bottom:13px; right:13px;
}
.orbit-container {
.orbit-prev, .orbit-next {
display:none; // hide the previous and next buttons
}
.orbit-timer {
background-color:pink; /*! no homo */ // change the background of the timer
.orbit-progress {
background-color:purple; // change the color of the overlayed progress bar
}
}
.orbit-slide-number {
// move the slide numbers to the bottom right corner.
top:inherit;
left:inherit;
bottom:13px;
right:13px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment