Orbit - An easy, powerful, responsive image slider

Orbit is an easy, powerful, responsive image slider that allows users to swipe on touch-enabled devices

Features:

- Easy to use

- Powerful image slider

- Fully responsive

- Content slider

-  Custom Bullets

-  Adding Captions

-  Directional Navigation on Hover

-  Graceful Orbit Loading State

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: foundation.zurb.com

1. INCLUDE CSS AND JS FILES

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>

2. HTML

Orbit requires minimal HTML markup to function. Our Javascript takes care of most of the heavy lifting for you. The only thing you need to do is add a <ul data-orbit></ul> element to your page. You can then populate it with images, text, and captions. Here's the markup required to implement a basic Orbit slider on your page:

<ul class="example-orbit" data-orbit>
  <li>
    <img src="../assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
    <div class="orbit-caption">
      Caption One.
    </div>
  </li>
  <li class="active">
    <img src="../assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
    <div class="orbit-caption">
      Caption Two.
    </div>
  </li>
  <li>
    <img src="../assets/img/examples/launch-orbit.jpg" alt="slide 3" />
    <div class="orbit-caption">
      Caption Three.
    </div>
  </li>
</ul>

3. OPTIONS

Using data-attributes is the preferred method of making changes to our Javascript.

<ul data-orbit data-options="animation_speed:1500;"> ... </ul>

You can also adjust settings using plain old Javascript. Here's all the available settings:

$(document).foundation({
  orbit: {
      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
      timer_show_progress_bar: true, // If the progress bar should get shown (false skips computation)
      slides_container_class: 'orbit-slides-container', // Class name given to the
      bullets_container_class: 'orbit-bullets',
      slide_selector: 'li', // Default is '*' which selects all children under the container
      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
  }
});

4. EVENTS

$("#featured1").on("ready.fndtn.orbit", function(event) {
  console.info("ready");
});
$("#featured1").on("before-slide-change.fndtn.orbit", function(event) {
  console.info("before slide change");
});
$("#featured1").on("after-slide-change.fndtn.orbit", function(event, orbit) {
  console.info("after slide change");
  console.info("slide " + orbit.slide_number + " of " + orbit.total_slides);
});
$("#featured1").on("timer-started.fndtn.orbit", function(event, orbit) {
  console.info("timer started");
});
$("#featured1").on("timer-stopped.fndtn.orbit", function(event, orbit) {
  console.info("timer stopped");
});

5. EXAMPLES

Content Sliders

<ul class="example-orbit-content" data-orbit>
  <li data-orbit-slide="headline-1">
    <div>
      <h2>Headline 1</h2>
      <h3>Subheadline</h3>
    </div>
  </li>
  <li data-orbit-slide="headline-2">
    <div>
      <h2>Headline 2</h2>
      <h3>Subheadline</h3>
    </div>
  </li>
  <li data-orbit-slide="headline-3">
    <div>
      <h2>Headline 3</h2>
      <h3>Subheadline</h3>
    </div>
  </li>
</ul>

Deep Linking

<a data-orbit-link="headline-1" class="small button">
  Goto Slide 1
</a>
<a data-orbit-link="headline-2" class="small button">
  Goto Slide 2
</a>
<a data-orbit-link="headline-3" class="small button">
  Goto Slide 3
</a>

Customized Orbit container

Html

<ul data-orbit
    data-options="animation:slide;
                  pause_on_hover:true;
                  animation_speed:500;
                  navigation_arrows:true;
                  bullets:false;">
</ul>

Javascript

$(document).foundation({
  orbit: {
    animation: 'slide',
    timer_speed: 1000,
    pause_on_hover: true,
    animation_speed: 500,
    navigation_arrows: true,
    bullets: false
  }
});