JSPM

judo-spin

1.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5
  • Score
    100M100P100Q38911F
  • License MIT

360° degrees image spinner using JavaScript.

Package Exports

  • judo-spin
  • judo-spin/dist/js/judo-spin.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (judo-spin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Judo Spin

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

View Online Demo


Table of Contents

Installation

[A] Download

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

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