Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Установка sly slider

Хочу представить очень крутой плагин для создания каруселей со скролом и большим набором функционала, и покажу как проходит установка sly slider. Я очень часто использую его в своих проектах где нужна карусель со скролбаром (scrollbar). Эта карусель очень хорошо себя показывает в адаптивной верстке, а также на мобильных устройствах. Sly slider хорошо работает при динамичном изменении блоков внутри нее.

Чтобы установить sly.js  карусель к себе на сайт достаточно пройти 3 простых шага.

Установка sly slider

1. Шаг  — Для начала Вам нужно перейти на страницу github плагина sly.js и скачать сам скрипт.

2. Шаг  — Подключение скрипта и стилей плагина.

<link rel="stylesheet" href="http://darsa.in/sly/examples/css/horizontal.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sly/1.6.1/sly.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

Подключать нужно между тегами <head></head> вашей html страницы.В примере я использую путь напрямую к файлам на самом сайте sly.js.

3. Шаг — вставка самого html кода слайдера.

<div class="wrap">
    <h2>Basic <small>- with all the navigation options enabled</small></h2>

    <div class="scrollbar">
        <div class="handle">
            <div class="mousearea"></div>
        </div>
    </div>

    <div class="frame" id="basic">
        <ul class="clearfix">
            <li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li>
            <li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>
            <li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li>
            <li>28</li><li>29</li>
        </ul>
    </div>

    <ul class="pages"></ul>

    <div class="controls center">
        <button class="btn prevPage"><i class="icon-chevron-left"></i><i class="icon-chevron-left"></i> page</button>
        <button class="btn prev"><i class="icon-chevron-left"></i> item</button>
        <button class="btn backward"><i class="icon-chevron-left"></i> move</button>

        <div class="btn-group">
            <button class="btn toStart">toStart</button>
            <button class="btn toCenter">toCenter</button>
            <button class="btn toEnd">toEnd</button>
        </div>

        <div class="btn-group">
            <button class="btn toStart" data-item="10"><strong>10</strong> toStart</button>
            <button class="btn toCenter" data-item="10"><strong>10</strong> toCenter</button>
            <button class="btn toEnd" data-item="10"><strong>10</strong> toEnd</button>
        </div>

        <div class="btn-group">
            <button class="btn add"><i class="icon-plus-sign"></i></button>
            <button class="btn remove"><i class="icon-minus-sign"></i></button>
        </div>

        <button class="btn forward">move <i class="icon-chevron-right"></i></button>
        <button class="btn next">item <i class="icon-chevron-right"></i></button>
        <button class="btn nextPage">page <i class="icon-chevron-right"></i><i class="icon-chevron-right"></i></button>
    </div>
</div>

Этот код нужно вставить между тегами <body></body>, в том месте где вы хотите отобразить сам слайдер.

4. Шаг — инициализация слайдера.

var $frame  = $('#basic');
var $slidee = $frame.children('ul').eq(0);
var $wrap   = $frame.parent();

// Call Sly on frame
$frame.sly({
  horizontal: 1,
  itemNav: 'basic',
  smart: 1,
  activateOn: 'click',
  mouseDragging: 1,
  touchDragging: 1,
  releaseSwing: 1,
  startAt: 3,
  scrollBar: $wrap.find('.scrollbar'),
  scrollBy: 1,
  pagesBar: $wrap.find('.pages'),
  activatePageOn: 'click',
  speed: 300,
  elasticBounds: 1,
  easing: 'easeOutExpo',
  dragHandle: 1,
  dynamicHandle: 1,
  clickBar: 1,

  // Buttons
  forward: $wrap.find('.forward'),
  backward: $wrap.find('.backward'),
  prev: $wrap.find('.prev'),
  next: $wrap.find('.next'),
  prevPage: $wrap.find('.prevPage'),
  nextPage: $wrap.find('.nextPage')
});

// To Start button
$wrap.find('.toStart').on('click', function () {
  var item = $(this).data('item');
  // Animate a particular item to the start of the frame.
  // If no item is provided, the whole content will be animated.
  $frame.sly('toStart', item);
});

// To Center button
$wrap.find('.toCenter').on('click', function () {
  var item = $(this).data('item');
  // Animate a particular item to the center of the frame.
  // If no item is provided, the whole content will be animated.
  $frame.sly('toCenter', item);
});

// To End button
$wrap.find('.toEnd').on('click', function () {
  var item = $(this).data('item');
  // Animate a particular item to the end of the frame.
  // If no item is provided, the whole content will be animated.
  $frame.sly('toEnd', item);
});

// Add item
$wrap.find('.add').on('click', function () {
  $frame.sly('add', '<li>' + $slidee.children().length + '</li>');
});

// Remove item
$wrap.find('.remove').on('click', function () {
  $frame.sly('remove', -1);
});

Подключать нужно между тегами <head></head> вашей html страницы, но после кода, который Вы вставляли в шаге №2

Наглядно посмотреть сам слайдер вы можете на примере который я сделал ниже:

See the Pen Sly slider by Хміль Діма (@dmondma) on CodePen.dark

 

Можете еще посмотреть пост про карусель на основе slick slider или bxslider

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X