Media - Zurb Foundation Framework Elements

1. Orbit Slider

Orbit slider is used for creating responsive image or content slider with easy and efficient manner. By using orbit, the user can swipe on touch enabled devices. It use foundation.orbit javascript file. If you need to use orbit element to your website, you will add following codes only.

Properties of Orbit Side:

  • animation: It represents the type of animation used for transitioning between slides. It also can be set as 'fade'. Ex: animation: 'slide'.
  • timer_speed: It represents the amount of time before transmitting a slide (in milli seconds).
  • pause_on_hover: It is used to pauses current slide while hovering.
  • animation_speed: It represents the amount of time the transmission between slides will lost.
  • navigation_arrows: It displays arrow links at left and right of the image.
  • bullets: This property shows bullet for slider.
  • Orbit Slider Code
    <ul data-orbit data-options="pause_on_hover:false; timer_speed:2500">
    <li> <img src="img/1.jpg" alt=???image1???/> </li>
    <li> <img src="img/2.jpg" alt=???image2???/> </li>
    <li> <img src="img/3.jpg" alt=???image3???/> </li>
    </ul>
    
    Output
    • image1
    • image2
    • image3
    2. Thumbnails

    It allows user to create a thumbnail image using minimal markup.

    Thumbnails Code
    <a class="th" href="../img/1.jpg">
      <img src="../img/1-th.jpg">
    </a>
    
    image1
    3. Flex Video

    If you are embedding video from YouTube, the flex video element automatically scales video object in your web pages.

    Flex Video Code
    <div class="flex-video">
      <iframe width="420" height="315"  src="//www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
    </div>