This is a slideshow wrapper that you can re-use to display a slideshow on your site.

You can see the slideshow in action at bondigeek.com/

Prerequisites:

  • jQuery

Tested In:

*IE8/IE9

  • Firefox

    • Chrome
  • Safari for Windows + MAC

It comes with the following features:

  • create slideshow in 1 line of code
  • Will handle any number of (same dimension) images that you care to load
  • automatically slides at a random interval
  • initial direction of slide (left or right) can be specified
  • automatically reverses slideshow at the end and beginning of the list of images
  • allows for setting of the initial slide operation to allow time for other slideshow images to pre-load
  • Provides parameters for min and max length of interval between slide operations
  • minimal css config with initial background image whilst other slide images pre-load

Known Issues:

When the browser windows is hidden for a time period and you go back to the window you get some erratic behaviour (whilst the events catch up I imagine). Looking in to a fix for this which pauses the slideshow when the window is no longer visible.

Code below the break



/* CODE FOR CREATING YOUR SLIDESHOW */
var mainSlideShow = new Slideshow(0, 312, "#slideshow_wrapper ul", 8, 4, 10);

/* MARKUP FOR THE SLIDESHOW /
/
Note: this solution passes in an MVC partial view of

  • elements but you are free to get your list of elements in there however you like
    PartialView shown at the bottom for your reference */

    
    @Html.Partial("_Slideshow", Model.Slideshow)

    /* SLIDESHOW OBJECT /
    /
    Variable names are intentionally left lengthy in code to make it more descriptive */
    function Slideshow(d, w, t, initi, mini, maxi) {
    // Parameters
    // d = direction: 0=forward, 1=reverse
    // w = The width of the images in your slideshow
    // t = The target of the slide as a jquery selector. This will be a

      element
      // initi = The interval for the 1st slide operation
      // mini = The minimum interval for a slide operation
      // maxi = The maximum interval for a slide operation
      this.direction = d;
      this.count = $(t).find("li").length;
      this.width = w;
      this.target = t;
      this.index = d 0 ? this.count - 1 : 0;
      this.initialInterbal = initi;
      this.minInterval = mini;
      this.maxInterval = maxi;

      $(this.target).css("left", ((-1 * this.width) * this.index) + "px");
      $(this.target).css("width", this.width * this.count + "px");

      this.SetTimer(initi);
      }

      Slideshow.prototype.SetTimer = function (initi) {
      var slideshow = this;

      function Slide() {
      slideshow.HandleTimer();
      }

      if (initi != null) {
      setTimeout(Slide, initi * 1000);
      } else {
      var randomnumber = Math.floor(Math.random() * this.maxInterval)
      while (randomnumber < this.minInterval) {
      randomnumber = Math.floor(Math.random() * this.maxInterval)
      }
      setTimeout(Slide, randomnumber * 1000);
      }
      }

      Slideshow.prototype.HandleTimer = function () {
      if (this.direction 0) {
      if (this.index + 1 < this.count) {
      this.index++;
      }
      else {
      this.index--;
      this.direction = 1;
      }
      } else {
      if (this.index - 1 >= 0) {
      this.index--;
      } else {
      this.index++;
      this.direction = 0;
      }
      }
      $(this.target).animate({ left: (-1 * this.width) * this.index }, 500, "swing");
      $(this.target).parent().css("background-image", "none");

      this.SetTimer();
      }

      /REQUIRED CSS */
      /
      Note: The #slideshow_wrapper background image is for displaying an initial image when first loaded whilst the rest of the slideshow is downloaded. This is removed on the call to HandleTimer */

      .slideshow ul
      {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
      position: absolute;
      width:312px;
      left:0px;
      }
      .slideshow ul li
      {
      float:left;
      }

      slideshow_wrapper

      {
      background-position: left top;
      background-image: url('http://bondigeekmedia.blob.core.windows.net/media/Content/img/backgrounds/Bondi_18.jpg');
      background-repeat: no-repeat;
      overflow: hidden;
      height: 152px;
      position: relative;
      width: 312px;
      }

      /* PARTIAL VIEW - FOR REFERENCE ONLY */
      @model IEnumerable

        @foreach (var item in Model) { if (@item.Hyperlink.Length > 0) { 
      • @item.AltText
      • } else { 
      • @item.AltText
      • } }

      Hope you find the code helpful.

      BondiGeek