7.8 #permalink GG Slideshow

Toggle example guides Toggle HTML markup

Lightweight slideshow handling the auto-hiding arrows at the right and left, and associated javascript to preload the photos and handle the arrow navigation.

Example
Markup
<div class="ggSlideshow col_whiteText layout_center">
  <a href="javascript:void(0)" class="ggSlideshow-left grid-2 col_ggPrimary5Dark col_inherit layout_center text_fontSizeJumbo layout_centerVertical grid-parent"><div class="layout_centerBoth">&lsaquo;</div></a>
  <a href="https://www.globalgiving.org/pfil/14256/pict_original.jpg" class="js-slideshowLink">
    <img
      alt="Picture 1"
      src="https://www.globalgiving.org/pfil/14256/pict_original.jpg"
      class="js-slideshow"
      data-slideshow="0"
      style="max-width:100%"
    />
  </a>
  <a href="javascript:void(0)" class="ggSlideshow-right link_subtle grid-2 col_ggPrimary5Dark col_inherit layout_center text_fontSizeJumbo layout_centerVertical grid-parent"><div class="layout_centerBoth">&rsaquo;</div></a>
</div>
<script type="text/javascript">
  gg.slideshow = [
    "https://www.globalgiving.org/pfil/14256/pict_original.jpg",
    "https://www.globalgiving.org/pfil/14256/ph_14256_78491.jpg",
    "https://www.globalgiving.org/pfil/14256/ph_14256_51856.jpg",
    "https://www.globalgiving.org/pfil/14256/ph_14256_51857.jpg",
    "https://www.globalgiving.org/pfil/14256/ph_14256_51858.jpg"
  ];
  deferred.push(["loadJS","/v2/js/modules/ggSlideshow.js"]);
</script>
Source: modules/07_large_elements/ggSlideshow.less, line 2