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

слайдер контента на jQuery — Slide JS

Офсайт: 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 src="js/slides.min.jquery.js"></script>

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

<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'
      });
    });
    

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

    По умолчанию испольуется эффект: 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
      });
    });
    

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