→   Слайдер контента SlideJS на jQuery

Офсайт: slidesjs.com

Установка SlideJS

В первую очередь, опишем html - структуру:

<div id="slides">
   <div class="slides_container">
       <div>
            <h1>Первый слайд</h1>
            <p>Содержимое самого первого контейнера.</p>
       </div>
       <div>
           <h1>Второй слайд</h1>
           <p>Содержимое второго контейнера.</p>
       </div>
       <div>
           <h1>Третий слайд</h1>
           <p>Содержимое контейнера номер три.</p>
       </div>
       <div>
           <h1>Четвертый слайд</h1>
           <p>Содержимое четвёртого контейнера.</p>
       </div>
    </div>
</div>

И CSS:

<style type="text/css" media="screen">   
  .slides_container {
        width:470px;
        height:170px;
    }
    .slides_container div {
          width:470px;      
          height:170px;      
          display:block;    
    }  
</style>

Далее для установки подключаем сначала сам плагин, кстати весит он прилично – 8,22 kb:

И сниппет (вот тут как раз и нужно задавать настройки описанные ниже):

<script>
    $(function(){
      $("#slides").slides(); // контейнер с элементами слайдера
    });
</script>

Слайдер несколько громоздкий, но это следствие, того, что у него в арсенале очень много занятных настроек.

Настройки/опции слайдера

• Прелоадер — показ изображения во время загрузки контента слайдера. Preload:true/false

  $(function(){
    $("#slides").slides({
      preload: true
    });
  });
  

  По умолчанию отключено, то есть содержит значение: false.

       Показать
• Изображние прелоадера — можно указывать название и расположения. preloadImage (string)

  $(function(){
    $("#slides").slides({
      preload: true,
      preloadImage: '/img/loading.gif'
    });
  });
  

  По умолчанию используется путь: '/img/loading.gif'.

       Показать
• Имя класса в CSS для контейнеров слайдов container (string)

  $(function(){
    $("#slides").slides({
      container: 'slides_container'
    });
  });
  

  По умолчанию используется имя класса: "slides_container".

       Показать
• Вставка контролеров скролла, то есть стрелок вперед/назад generateNextPrev (boolean)

  $(function(){
    $("#slides").slides({
      generateNextPrev: true
    });
  });
  

  По умолчанию отключено: false.

       Показать
• Класс для контролера следующего слайда next (string)

  $(function(){
    $("#slides").slides({
      next: 'next'
    });
  });
  

  По умолчанию имя класса: .next.

       Показать
• Класс для контролера предыдушего слайда prev (string)

  $(function(){
    $("#slides").slides({
      next: 'next'
    });
  });
  

  По умолчанию имя класса: .prev.

       Показать
• Вывод нумерации слайдов pagination (boolean)

  $(function(){
    $("#slides").slides({
      pagination: true
    });
  });
  

  По умолчанию отключено: false.

       Показать
• Автоматическое создание нумерации слайдов generatePagination (boolean)

  $(function(){
    $("#slides").slides({
      generatePagination: true
    });
  });
  

  А это как раз по умолчанию включено: true.

       Показать
• Имя класса для блока с нумерами слайдов paginationClass (string)

  $(function(){
    $("#slides").slides({
      paginationClass: 'pagination'
    });
  });
  

  По умолчанию используется имя класса: .pagination.

       Показать
• Установка скорости затухания анимации при смене слайдов в милисекундах fadeSpeed (number)

  $(function(){
    $("#slides").slides({
      fadeSpeed: 350
    });
  });
  

  По умолчанию поставлено 350 милисекундю

       Показать
• Установка скорости анимации сменв слайдов в милисекундах slideSpeed (number)

  $(function(){
    $("#slides").slides({
      slideSpeed: 350
    });
  });
  

  По умолчанию поставлено 350 милисекундю

       Показать
• Установка позиции стартового слайда start (number)

  $(function(){
    $("#slides").slides({
      start: 1
    });
  });
  

  По умолчанию, естевственно первый слайд, является стартовым.

       Показать
• Установка эффекта смены слайда — затухание или просто привычный сдвиг справа на лево. effect (string)

  Здесь интересно, что можно разделить эффекты смены слайдов для кликов по обычным контролерам и кликам по номерам слайдов. Так вот, если поставить один эффект смены, вот так:

  $(function(){
    $("#slides").slides({
      effect: 'slide'
    });
  });
  

  То один и тот же эффект будет использован в двух описанных выше случаях.
  А если написать вот так:

  $(function(){
    $("#slides").slides({
      effect: 'slide, fade'
    });
  });
  

  То в зависимости от того каким образом была вызвана смена слайда будет использоваться соотвествующий эффект. В общем можно поиграться.

  По умолчанию испольуется эффект: slide.

       Показать
• Накладывание изображений слайдов crossfade (boolean)

  $(function(){
    $("#slides").slides({
      crossfade: true
    });
  });
  

  По умолчанию, отключено: false

       Показать
• Случайная смена слайдов randomize (boolean)

  $(function(){
    $("#slides").slides({
      randomize: true
    });
  });
  

  По умолчанию, отключено: false

       Показать
• Добавление интервала проигрывания слайдов play (number)

  $(function(){
    $("#slides").slides({
      play: 5000
    });
  });
  

  По умолчанию равно 0, что эквивалентно false

       Показать
• Добавление паузы проигрывания слайдов pause (number)

  $(function(){
    $("#slides").slides({
      pause: 2500
    });
  });
  

  По умолчанию равно 0, что эквивалентно false

       Показать
• Добавление паузы при наведении курсора на слайд hoverPause (boolean)

  $(function(){
    $("#slides").slides({
      hoverPause: pause
    });
  });
  

  По умолчанию отключеноfalse

       Показать
• Установка регулировка высоты под содержимое слайда autoHeight (boolean)

  $(function(){
    $("#slides").slides({
      autoHeight: true
    });
  });
  

  По умолчанию отключеноfalse

       Показать
• Анимация изменения высоты autoHeightSpeed (number)

  $(function(){
    $("#slides").slides({
      autoHeightSpeed: 350
    });
  });
  

  По умолчанию, поставилено: 350 милисекунд

       Показать
• Привязка ссылкой bigTarget (boolean)

  $(function(){
    $("#slides").slides({
      bigTarget: true
    });
  });
  

  По умолчанию отключеноfalse

       Показать
• Анимируем что-то ещё кроме слайда animationStart() (callback)

  $(function(){
    $("#slides").slides({
      animationStart: function() {
  		// Делаем что-то крутое
  	}
    });
  });
  

       Показать
• Комбинирование настроек, например, вот так:

  $(function(){
    $("#slides").slides({
      preload: true,
      preloadImage: '/img/loading.gif',
      play: 5000,
      pause: 2500,
      hoverPause: true
    });
  });
  

Приятного использования :-)