Glider.js

<link rel="stylesheet" href="glider.min.css">
или
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css">

<script src="glider.min.js"></script>
или
<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>

<div class="glider">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

new Glider(document.querySelector('.glider'));

new Glider(document.querySelector('.glider'), {

  // `auto` позволяет автоматически вычислять адаптивную ширину
  slidesToShow: 'auto',
  slidesToScroll: 'auto',

  // должно было называться `itemMinWidth`
  // слайды увеличиваются до размера контейнера
  // игнорируется, если `slidesToShow` установлен на `auto`
  itemWidth: undefined,

  // если true, слайды не будут масштабироваться для соответствия размеру экрана
  // требует установки `itemWidth`
  // * это может вызвать наличие дробных слайдов
  exactWidth: false,

  // скорость прокрутки — чем выше значение, тем медленнее прокрутка
  duration: .5,

  // контейнер элементов или селектор для точек
  dots: 'CSS Selector',

  // контейнер элементов или селектор для стрелок
  arrows: {
    prev: 'CSS Selector',
    // можно передать элемент напрямую
    next: document.querySelector('CSS Selector')
  },
});  // enable mouse dragging
  draggable: false,
  // how much to scroll with each movement of the mouse
  dragVelocity: 3.3,

  // use any custom easing function
  // compatible with most easing plugins
  easing: function(x, t, b, c, d) {
    return c * (t /= d) * t + b;
  },

  // event propagation management
  scrollPropagate: false,
  eventPropagate: true,

  // force centering of the slide after a scrolling event
  scrollLock: false,
  // how long to wait after a scrolling event before locking
  // if too short, it may interfere with normal scrolling
  scrollLockDelay: 150,  // Force centering of the slide after a resizing event
  resizeLock: true,

  // Glider.js breakpoints are mobile-oriented
  responsive: [
    {
      breakpoint: 900,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 575,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    }
  ]
});

Glider(document.querySelector(element_path)).setOption({
  name: value,
  ...
});

// optionally call refresh
Glider(document.querySelector(element_path)).refresh();

document.querySelector(element_path).addEventListener('glider-slide-visible', function(event){
  // `this` is bound to the glider element
  // custom data is located in `event.detail`
  // access to the Glider object through `Glider(this)`
  ...
});

Glider(document.querySelector(element_path)).destroy();

#### Поддержка браузеров

Glider.js должна работать во всех современных браузерах. Поддержка старых браузеров может быть достигнута путём использования полифилов для `document.classList`, `window.requestAnimationFrame`, `Object.assign` и `CustomEvent`.

Добавьте `glider-compat.min.js` для загрузки вышеупомянутых полифилов.

#### Нативные полосы прокрутки

Большинство браузеров теперь поддерживают свойство `scrollbar-width`, что позволяет избежать грязной хакерской доработки ниже.

**ПРИМЕЧАНИЕ:** Эта функция отмечена как экспериментальная и может не работать во всех браузерах.

```css
.glider-track {
  scrollbar-width: none;
}

```javascript
document.addEventListener('glider-loaded', скрытьFFScrollIndicator);
document.addEventListener('glider-refresh', скрытьFFScrollIndicator);

function скрытьFFScrollIndicator(e) {
  var высотаПолосыПрокрутки = 17; // Currently 17, may change with updates
  if (/firefox/i.test(navigator.userAgent)) {
    // We need to apply this only to the desktop version. Firefox for mobile devices uses a different rendering engine (WebKit)
    if (window.innerWidth > 575) {
      e.target.parentNode.style.height = (e.target.offsetHeight - высотаПолосыПрокрутки) + 'px';
    }
  }
}