Skip to content

Rodgath/judo-spin

Repository files navigation

Judo Spin

360° degrees image spinner and rotation built with vanilla JavaScript.


Table of Contents

Installation

[A] Download

[B] Package

  • Install with yarn: yarn add judo-spin

  • Install with npm: npm install judo-spin

  • NPM

[C] Get a local working copy of the development repository (Optional)
git clone https://github.com/Rodgath/judo-spin.git

Implementation

There are several methods you can use to add Judo Spin into your project.

Method 1

Using data-judo-spin attribute. View Demo

Your HTML code of upto 36 images

<div data-judo-spin='{ "currImage": "6" }'>
  <img src="images/car/01.png" alt="Image 01">
  <img src="images/car/02.png" alt="Image 02">

  <!-- More Images Here -->
  
  <img src="images/car/35.png" alt="Image 35">
  <img src="images/car/36.png" alt="Image 36">
</div>

Enqueue the judoSpin script at the bottom of your markup

  • Using local script file.
<script src="judo-spin.min.js"></script>
<!-- OR -->
<script src="./node_modules/judo-spin/dist/js/judo-spin.min.js"></script>
  • Using CDN file. (Optional)
<script src="https://cdn.jsdelivr.net/npm/judo-spin@latest/dist/js/judo-spin.min.js"></script>

Method 2

Initializing with judoSpin function. View Demo

Your HTML code of upto 36 images

<div class="image-spin-box">
  <img src="images/car/01.png" alt="Image 01">
  <img src="images/car/02.png" alt="Image 02">

  <!-- More Images Here -->
  
  <img src="images/car/35.png" alt="Image 35">
  <img src="images/car/36.png" alt="Image 36">
</div>

Call the judoSpin() function with two arguments.

...1) The element 'class' or 'id' holding the images

...2) The 'options' object

document.addEventListener('DOMContentLoaded', function() {
  judoSpin('.image-spin-box', { currImage: 1, enableDragHangle: true });
});

Enqueue the judoSpin script at the bottom of your markup

  • Using local script file.
<script src="judo-spin.min.js"></script>
<!-- OR -->
<script src="./node_modules/judo-spin/dist/js/judo-spin.min.js"></script>
  • Using CDN file. (Optional)
<script src="https://cdn.jsdelivr.net/npm/judo-spin@latest/dist/js/judo-spin.min.js"></script>

Method 3

Using JSON object of images

...[A] - Adding the JSON object inside the data-judo-spin attribute. View Demo

<div data-judo-spin='{ 
    "currImage": 13,
    "images": [
      { "src": "images/car/01.png", "title": "Image 01" },
      { "src": "images/car/02.png", "title": "Image 02" },
      
      // More Images Here

      { "src": "images/car/35.png", "title": "Image 35" },
      { "src": "images/car/36.png", "title": "Image 36" }
    ] 
  }'></div>

...[B] - Add the JSON object inside the judoSpin function. View Demo

HTML code.

<div class="image-rotation-box image-spin-demo"></div>

JavaScript code

document.addEventListener('DOMContentLoaded', function() {
   judoSpin('.image-rotation-box', {
      currImage: 22, 
      images: [
        { "src": "images/car/01.png", "title": "Image 01" },
        { "src": "images/car/02.png", "title": "Image 02" },
        
        // More Images Here

        { "src": "images/car/35.png", "title": "Image 35" },
        { "src": "images/car/36.png", "title": "Image 36" }
      ]
    });
});

Options

Name Type Default Description
currImage number 1 The default image when judo spin loads. Range is 1 - 36.
images array object -
enableDragHandle boolean false Whether to show the drag handler scroller.

License

judoSpin is an open-source project released under the MIT license.


Crafted by Rodgath