Slideshows

We currently have a few different options for slideshows.

Slideshow with Arrows

We now have the option to allow site visitor to scroll from one photo to the next in a slideshow. There are no thumbnails with this option, but there are arrows to scroll right or left, and if you hover over it the scrolling will stop. A current example can be found on Aguila Elementary School District.

  1. Create a new Slideshow module from the Slideshow Template.
  2. Be sure you've already uploaded your images to the system, and add your entities.
  3. We will need to update the height and width of the images in the code to reflect that of the images you are uploading. So in the source code of the Slideshow with Arrows component, find the line of code that says "data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1186px; height: 448px; overflow: hidden;" Update the width and height to that of your images, and save. You can also control the placement of your arrows by using the classes  ?.jssora22l, .jssora22r in the styles section toward the bottom of the source code.
  4. When adding the module to the page, be sure to place the component called Slideshow with Arrows on the page for the correct code. 

Slideshow Options

We are currently using a slideshow plugin called Cycle 2. You can find different options by going to http://jquery.malsup.com/cycle2.