Judo Spin

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

View Online Demo

Table of Contents

• Installation
• Implementation
  • Method 1
  • Method 2
  • Method 3
• Options
• License

Installation

[A] Download

• judo-spin.min.js - Minified
• judo-spin.js - Unminified

[B] Package

• Install with npm: npm install judo-spin

• Install with yarn: yarn add judo-spin

[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>

↑ TOP ↑

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>

↑ TOP ↑

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" }
      ]
    });
});

↑ TOP ↑

Options

Name | Type | Default | Description :--- | :--- | :------ | :---------- currImage | number | 1 | The default image when judo spin loads. Range is 1 - 36. images | array|object | - | Array of images as JSON object or DOM images. 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

↑ TOP ↑