Skip to content

Instantly share code, notes, and snippets.

@tsquez
Last active August 29, 2015 14:08
Show Gist options
  • Save tsquez/445fc6c8c43997450573 to your computer and use it in GitHub Desktop.
Save tsquez/445fc6c8c43997450573 to your computer and use it in GitHub Desktop.
How to set data-options for Orbit without using javascript
animation: 'slide', // Sets the type of animation used for transitioning between slides, can also be 'fade'
timer_speed: 10000, // Sets the amount of time in milliseconds before transitioning a slide
pause_on_hover: true, // Pauses on the current slide while hovering
resume_on_mouseout: false, // If pause on hover is set to true, this setting resumes playback after mousing out of slide
next_on_click: true, // Advance to next slide on click
animation_speed: 500, // Sets the amount of time in milliseconds the transition between slides will last
stack_on_small: false,
navigation_arrows: true,
slide_number: true,
slide_number_text: 'of',
container_class: 'orbit-container',
stack_on_small_class: 'orbit-stack-on-small',
next_class: 'orbit-next', // Class name given to the next button
prev_class: 'orbit-prev', // Class name given to the previous button
timer_container_class: 'orbit-timer', // Class name given to the timer
timer_paused_class: 'paused', // Class name given to the paused button
timer_progress_class: 'orbit-progress', // Class name given to the progress bar
slides_container_class: 'orbit-slides-container', // Class name given to the slide container
preloader_class: 'preloader', // Class given to the perloader
slide_selector: 'li', // Default is '*' which selects all children under the container
bullets_container_class: 'orbit-bullets',
bullets_active_class: 'active', // Class name given to the active bullet
slide_number_class: 'orbit-slide-number', // Class name given to the slide number
caption_class: 'orbit-caption', // Class name given to the caption
active_slide_class: 'active', // Class name given to the active slide
orbit_transition_class: 'orbit-transitioning',
bullets: true, // Does the slider have bullets visible?
circular: true, // Does the slider should go to the first slide after showing the last?
timer: true, // Does the slider have a timer active? Setting to false disables the timer.
variable_height: false, // Does the slider have variable height content?
swipe: true,
before_slide_change: noop, // Execute a function before the slide changes
after_slide_change: noop // Execute a function after the slide changes
Use the following to set up Orbit:
<div class="slideshow-wrapper">
<div class="preloader"></div>/* you can remove this if you do not want a preloader */
<ul data-orbit="" data-options="the above listed options go here. Make sure they are separated with a ;">
<li>insert image here
<div class="orbit-caption">insert the image caption here or remove this div to not have a caption</div></li>
</ul><!-- end data-orbit -->
</div><!-- end slideshow-wrapper -->
If you are trying to hide the timer, it will not work with timer:false - This will make the timer stop working completely. You can however use the following css to hide the timer:
.orbit-timer {
left: -10000px;
top: auto;
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment