Add this code anywhere in your markup.
<div class="image-spin-box"> <img src="images/01.png" alt="Image 01"> <img src="images/02.png" alt="Image 02"> <img src="images/03.png" alt="Image 03"> <img src="images/04.png" alt="Image 04"> <img src="images/05.png" alt="Image 05"> <img src="images/06.png" alt="Image 06"> <img src="images/07.png" alt="Image 07"> <img src="images/08.png" alt="Image 08"> <img src="images/09.png" alt="Image 09"> <img src="images/10.png" alt="Image 10"> <img src="images/11.png" alt="Image 11"> <img src="images/12.png" alt="Image 12"> <img src="images/13.png" alt="Image 13"> <img src="images/14.png" alt="Image 14"> <img src="images/15.png" alt="Image 15"> <img src="images/16.png" alt="Image 16"> <img src="images/17.png" alt="Image 17"> <img src="images/18.png" alt="Image 18"> <img src="images/19.png" alt="Image 19"> <img src="images/20.png" alt="Image 20"> <img src="images/21.png" alt="Image 21"> <img src="images/22.png" alt="Image 22"> <img src="images/23.png" alt="Image 23"> <img src="images/24.png" alt="Image 24"> <img src="images/25.png" alt="Image 25"> <img src="images/26.png" alt="Image 26"> <img src="images/27.png" alt="Image 27"> <img src="images/28.png" alt="Image 28"> <img src="images/29.png" alt="Image 29"> <img src="images/30.png" alt="Image 30"> <img src="images/31.png" alt="Image 31"> <img src="images/32.png" alt="Image 32"> <img src="images/33.png" alt="Image 33"> <img src="images/34.png" alt="Image 34"> <img src="images/35.png" alt="Image 35"> <img src="images/36.png" alt="Image 36"> </div>
Add this code before the </body> tag in your markup.
<script> document.addEventListener('DOMContentLoaded', function () { judoSpin('.image-spin-box', { currImage: 1, enableDragHandle: true }); }); </script>
judo-spin.min.js
<script src="js/judo-spin.min.js"></script>