Glitch Slider — Expressive Transition Effect

Set up

1. Embody Glitch Slider’s recordsdata in your web page:

• js / jquery-3.3.1.min.js (when you don’t have jQuery linked already)
• js / glitch-slider.js
• css / glitch-slider.css

<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/glitch-slider.js"></script>
<hyperlink rel="stylesheet" href="./css/glitch-slider.css">

2. You could have construction in HTML web page like this:

<div id="glitch-slider">
  <img src="image-3.jpg">
  <img src="image-2.jpg">
  <img src="image-1.jpg">
</div>

Every <img> tag shall be slider body. Use as a lot <img> tags as you want wrapped into <div> with `glitch-slider` ID.

Settings

The `glitch-slider.js` file has obtainable the next settings on the finish of the file:

• `pace` – time in milliseconds between transitions
• `buttons` – allow / disable navigation buttons

For the most effective outcome use picture dimension the identical like `glitch-slider` container dimension.