Слайдер на css - radio, с фиксированной горизонтальной навигацией с подписями. Тултип по наведению на слайд. Автоматическое переключение слайдов (по таймеру, js). Переход по ссылке по нажатию на слайд (картинку). Пример: http://codepen.io/slavikse/full/GpxWXz/

index.jade

- var headlines = [ 'контакт', 'гугл', 'вааау' ]
- var tooltips = [ 'Вступи в группу в контакте', 'Гугл в помощь', 'ого, тултипчик' ]
- var links = [ 'http://vk.com', 'http://google.com', 'http://ya.ru' ]
- var images = [ 'http://loremflickr.com/400/200?random=1', 'http://loremflickr.com/400/200?random=2', 'http://loremflickr.com/400/200?random=3' ]

.slider
  - for (var i = 1; i <= images.length; i++)
      if i == 1
        input(checked data-slide='#{i}' id='slider-#{i}' class='slider-#{i}' type='radio' name='slider' hidden)
      else
        input(data-slide='#{i}' id='slider-#{i}' class='slider-#{i}' type='radio' name='slider' hidden)

  .slider__controls
    - for (var i = 1; i <= images.length; i++)
        label.slider__control(class='slider__control-#{i}' for='slider-#{i}')= headlines[i - 1]

  .slider__wrap
    - for (var i = 0; i < images.length; i++)
        a.slider__content(data-tooltip= tooltips[i] href= links[i] target='_blank')
          img(src= images[i])

script.coffee

# Принимает интервал между сменой слайдов в мс
Slider = (timer = 2000) ->
  timer = 500 if timer < 500
  controls = document.querySelector '.slider__controls'
  children = controls.children
  length = children.length
  slide = 0
  interval = null

  initInterval = ->
    interval = setInterval ->
      slide++
      if slide == length then slide = 0
      children[slide].control.checked = true
    , timer

  reInitInterval = (e) ->
    target = e.target
    if not target.classList.contains 'slider__control' then return
    slide = target.control.dataset.slide - 1
    target.control.checked = true
    clearInterval interval
    initInterval()

  controls.addEventListener 'mouseup', reInitInterval

  {
    go: initInterval
  }

new Slider(5000).go()

style.styl

*
  box-sizing border-box

body
  margin 0

zIndex1 = 100

/* Изменение поведения слайдера */
/* ширина картинки !все должны быть равной ширины */
imageWidth = 400px
/* кол-во изображений */
imagesNumber = 3
/* END */

/* ширина контейнера */
totalWidth = imagesNumber * 100%
/* ширина заголовка */
headlineWidth = 100% / imagesNumber
shiftImage(i)
  100% * -(i - 1)

.slider
  position relative
  display inline-block
  width imageWidth
  overflow hidden

  /* 1 блок - выделение активного ярлыка изображения */
  /* 2 блок - сдвиг изображений, >1 так как первую картинку не сдвигаем */
  for i in 1..imagesNumber
    &-{i}:checked ~ &__controls &__control-{i}
       background-color rgba(100, 0, 100, .7)
       color yellow

    if i > 1
      &-{i}:checked ~ &__wrap &__content
       transform translate3d(shiftImage(i), 0, 0)

  &__controls
    position absolute
    bottom 0
    width 100%
    background-color rgba(100, 100, 200, .4)
    z-index zIndex1
    color white
    line-height 1.7
    text-align center

  &__control
    float left
    width headlineWidth
    cursor pointer
    transition .4s
    z-index zIndex1

    &:nth-child(odd)
      background-color rgba(150, 170, 270, .4)

  &__wrap
    width totalWidth

  &__content
    display inline-block
    transition .4s

    &::after
      position absolute
      top 0
      left 0
      right 0
      height calc(100% - 2.7rem) /* вычитаем высоту контролов */
      padding-top 1rem
      text-align center
      color white
      font-size 1.3rem
      background-color rgba(0, 0, 0, .4)
      z-index zIndex1
      content attr(data-tooltip)
      transform translate3d(0, -100%, 0)
      transition .4s

    &:hover
      &::after
        transform translate3d(0, 0, 0)