Last active
August 29, 2015 14:08
-
-
Save tsquez/445fc6c8c43997450573 to your computer and use it in GitHub Desktop.
How to set data-options for Orbit without using javascript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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