Baraja: раскинем карты

<ul id="baraja-el" class="baraja-container">
  <li>
  <img src="images/1.jpg" alt="image1"/>
  <h4>Coco Loko</h4>
  <p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p>
  </li>
  <li> <!-- ... --> </li>
  <li> <!-- ... --> </li>
  <li> <!-- ... --> </li>
  <!-- ... -->
</ul>

$( '#baraja-el' ).baraja();

$( '#some-button' ).on( 'click', function( event ) {
   
  baraja.fan( {
  speed : 500,
  easing : 'ease-out',
  range : 90,
  direction : 'right',
  origin : { x : 25, y : 100 },
  center : true,
  translation : 0
  } );
   
} );

// Опции
$.Baraja.defaults = {
  // Указываем селектор для запуска функции next(). Например: '#baraja-nav-next'
  nextEl : '',
  // Указываем селектор для запуска функции previous()ы
  prevEl : '',
  // Скорость перехода
  speed : 300,
  // Эффект перехода
  easing : 'ease-in-out'
};

this.fanSettings = {
  // Скорость открытия/закрытия
  speed : 500,
  // Эффект для открытия/закрытия
  easing : 'ease-out',
  // Диапазон используемых углов для пунктов
  // Пример: с range:90 и center:false первый пункт  
  // будет повернут на 0deg, а последний - на 90deg;
  // Если center:true, то первый пункт будет повернут на 45deg
  // а последний - на -45deg; в обоих случаях диапазон составляет 90deg
  range : 90,
  // Определяем положение первого пункта  
  // (вправо, влево)
  // и угол его поворота(по часовой стрелке или против)
  direction : 'right',
  // Перемещение центра:
  // Вы так же можете определить minX и maxX, то есть диапазон смещения центра
  origin : { x : 25, y : 100 },
  // Дополнительное смещение для каждого пункта
  translation : 0,
  // Если пункты надо центрировать после трансформаций
  center : true,
  // Добавляем случайное число к конечному положению
  scatter : false
};