Mobile-friendly Fullpage Slider Library – Horizontally.js

Preview:

Description:

Horizontally.js is a lightweight, easy-to-use, fully responsive, touch-enabled, and full-page slider/slideshow/carousel component written in vanilla JavaScript. Fully compatible with mobile devices (phones and tablets).

How to use it:

1. Download and load the Horizontally.js in the document.

<link rel="stylesheet" href="horizontally.min.css" />
<script src="horizontally.min.js"></script>

2. Add your content to the Horizontally container.

<div id="horizontally">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
  ...
</div>

3. Initialize the Horizontally.js.

new horizontally({
    // options
});

4. Customize the animation speed. Default: 200(ms).

new horizontally({
    speed: 1000,
});

5. Determine whether to show pagination dots and navigation arrows. Default: true.

new horizontally({
    arrowButtons: true,
    pageSelector: false,
});

6. Override the default carousel selector.

new horizontally({
    wrapper: '#myCarousel',
});