Images with hyperlinks and titles

This is an example of making redirects to some pages by clicking on images and adding titles to every image. Everything is done by events handling: before there are two arrays created for links and titles, every array element is placed corresponding to every image. Afterwards, the slider is created and on every change of image the title is changed. When click on image happens the new page is opened with a link from "links" array. In the end, if you wish, simply set up the css property "cursor: pointer" for the slider container.

If you need to handle message clicks and titles as well - it is absolutely the same, change the event only.

To see effects demos visit effects page.

JavaScript
/* prepare the set of links for each picture */
var links = [
  "https://www.google.com/search?q=beaverslider%20link%201",
  "https://www.google.com/search?q=beaverslider%20link%202",
  "https://www.google.com/search?q=beaverslider%20link%203",
  "https://www.google.com/search?q=beaverslider%20link%204",
  "https://www.google.com/search?q=beaverslider%20link%205",
  "https://www.google.com/search?q=beaverslider%20link%206",
  "https://www.google.com/search?q=beaverslider%20link%207",
  "https://www.google.com/search?q=beaverslider%20link%208",
  "https://www.google.com/search?q=beaverslider%20link%209",
  "https://www.google.com/search?q=beaverslider%20link%2010"
];

/* prepare the set of titles for each picture */
var titles = [
  "Go to google to search for 'beaverslider link 1'",
  "Go to google to search for 'beaverslider link 2'",
  "Go to google to search for 'beaverslider link 3'",
  "Go to google to search for 'beaverslider link 4'",
  "Go to google to search for 'beaverslider link 5'",
  "Go to google to search for 'beaverslider link 6'",
  "Go to google to search for 'beaverslider link 7'",
  "Go to google to search for 'beaverslider link 8'",
  "Go to google to search for 'beaverslider link 9'",
  "Go to google to search for 'beaverslider link 10'"
];

/* set up the proper cursor */
$("#demo-slider").css("cursor","pointer");

/* finally, create the slider */
var slider = new BeaverSlider({
  type: "slider",
  structure: {
    container: {
      id: "demo-slider",
      width: 720,
      height: 420
    }
  },
  content: {
    images: [
      "/img/slider-demo/1.jpg",
      "/img/slider-demo/2.jpg",
      "/img/slider-demo/3.jpg",
      "/img/slider-demo/4.jpg",
      "/img/slider-demo/5.jpg",
      "/img/slider-demo/6.jpg",
      "/img/slider-demo/7.jpg",
      "/img/slider-demo/8.jpg",
      "/img/slider-demo/9.jpg",
      "/img/slider-demo/10.jpg"
    ]
  },
  animation: {
    waitAllImages: true,
    effects: effectSets["slider: big set 2"],
    initialInterval: 1000,
    interval: 2000
  },
  events: {
    /* setup event for each click to create links */
    imageClick: function(slider) {
      var currentLink = links[slider.currentImage];
      if (currentLink) window.open(currentLink);
    },
    /* setup event for each image change to change the title as well */
    afterSlideStart: function(slider) {
      var currentTitle = titles[slider.currentImage];
      if (currentTitle) slider.container.attr("title",currentTitle);
    },
    /* setup title for the first image */
    afterInitialize: function(slider) {
      if (titles[0]) slider.container.attr("title",titles[0]);
    }
  }
});