Slideshow

How to create a slideshow.

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here

Slideshow

Lambda uses flexslider to create impressive and responsive slideshows that respond even to touch events. The general markup used to create a slideshow is the following

<div class="flexslider" id="someID">
  <ul class="slides">
    <li>
      A slide (any content)
    </li>
    <li>
        Another  slide (any content)
    </li>
    …
  </ul>
</div>

You can control the behaviour of the slideshow by passing data attributes to the .flexslider div. The data attributes used are:

  • data-slideshow: defines if the slider will start automatically (“true”) or not (“false”), default value “true”.
  • data-flex-animation: defines the animation type, “slide” (default) or” fade”.
  • data-flex-speed: defines the slideshow animation speed, 7000 (default) or any number.
  • data-flex-directions: defines the visibility of the navigation arrows, “hide” or “show” (default).
  • data-flex-directions-type: defines the type of the direction arrows, “fancy” (with background like the “our clients” slideshow ) or “simple”.
  • data-flex-directions-position: defines the positioning of the direction arrows, “inside” (inside the slider, default) or” outside” the slider.
  • data-flex-controls: defines the visibility of the navigation controls, “hide” (default) or “show”.
  • data-flex-controlsposition: defines the positioning of the controls, “inside” (default), or “outside”.
  • data-flex-controlsalign: defines the alignment of the controls, “center” (default) “left” or “right”.
  • data-flex-itemwidth: the width of each item in case of a multi item carousel, 0 (default for 100%) or a number representing pixels (you can read more on flexsliders website ).

For example, to create a slideshow with navigation arrows and navigation controls outside the slideshow aligned to the left, that uses the effect “fade” and changes every 5 seconds you should use the following markup.

<div class="flexslider" data-flex-directions=”show”  data-flex-directions-type=”simple” data-flex-controls=”show”  data-flex-controlsalign=”left”  data-flex-speed=5000  id="someID">
Default values can be omitted. For more info on Flexslider please visit the owner's website here
Each slideshow should have an id.