Menu icon Foundation
How to make orbit work

I am using foundation on a rails app (with this gem: https://github.com/zurb/foundation-rails) and I want to include an orbit slider on my home page. I have the relevant html and js codes (below) but my slider images show one below each other. Could someone probably take me step by step on how to make this work?

<ul class="slider-orbit" data-orbit>
    ...
</ul>
            

         


$(document).foundation({
  orbit: {
    animation: 'slide', // Sets the type of animation used for transitioning between slides, can also be 'fade'
    timer_speed: 500, // 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: true, // If pause on hover is set to true, this setting resumes playback after mousing out of slide
    animation_speed: 250, // Sets the amount of time in milliseconds the transition between slides will last
    stack_on_small: false,
    navigation_arrows: true,
    slide_number: false,
    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 slides 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: false, // Does the slider have bullets visible?
    timer: false, // Does the slider have a timer visible?
    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
  }
});

            

         

sliderOrbitrailsjavascriptimages

I am using foundation on a rails app (with this gem: https://github.com/zurb/foundation-rails) and I want to include an orbit slider on my home page. I have the relevant html and js codes (below) but my slider images show one below each other. Could someone probably take me step by step on how to make this work?

<ul class="slider-orbit" data-orbit>
    ...
</ul>
            

         


$(document).foundation({
  orbit: {
    animation: 'slide', // Sets the type of animation used for transitioning between slides, can also be 'fade'
    timer_speed: 500, // 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: true, // If pause on hover is set to true, this setting resumes playback after mousing out of slide
    animation_speed: 250, // Sets the amount of time in milliseconds the transition between slides will last
    stack_on_small: false,
    navigation_arrows: true,
    slide_number: false,
    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 slides 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: false, // Does the slider have bullets visible?
    timer: false, // Does the slider have a timer visible?
    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
  }
});

            

         
tenaz3 over 5 years ago

Sebastian maybe the foundation was not initialized properly. If you are using many libraries I suggest to you do this:

index.html.erb

.....
<%= yield %>

 <%= render 'layouts/foundation' %>

layouts/_foundation.html.erb

 <script>
    $(function(){ $(document).foundation(); });
</script>

Or yet you can call foundation direct in your element like:

$('#slider-orbit').foundation('orbit')