Установка 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