JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<img class="i-360" src="http://www.bearingscity.am/gallery/img/demopage/image-2.jpg" alt="" />

CSS

.thumb-prod {
}
.owl-carousel {
    width: 300px;
    margin: 0 auto;
}
.none-change {
    opacity:0.3
}

img.i-360{
 /* cursor:url('http://code.vostrel.net/jquery.reel.cur'),move;*/
    cursor:url('http://jsfiddle.net/img/logo.png'),move;
}

JavaScript

/*!
 * jQuery.threesixty Image rotation plug-in for jQuery version 0.6
 * http://www.mathieusavard.info/threesixty/
 *
 * Copyright 2008-2010 Mathieu Dumais-Savard
 * Licensed under the MIT lice
 * http://www.opensource.org/licenses/mit-license.php
 * *
 * Date: Tue Aug 9
 */

jQuery.fn.threesixty = function (options) {
    options = options || {};
    options.images = options.images || [];
    options.method = options.method || "click" //can be click, mouse move or auto
    options.cycle = options.cycle || 1;
    options.resetMargin = options.resetMargin || 0;
    options.direction = options.direction || "forward";
    options.sensibility = options.sensibility || options.cycle * 0.35;
    options.autoscrollspeed = options.autoscrollspeed || 500;


    if (options.direction == "backward") options.images.reverse();

    return this.each(function () {
        var imgArr = [];
        var pic = $(this);

        $(function () {
            var cache = [];
            var parent = $("<div>");
            parent.css({
                height: pic.height(),
                width: pic.width(),
                overflow: "hidden",
                position: "relative"
            });
            pic.wrap(parent).css({
                position: "relative",
                top: 0,
                left: 0
            });
            parent = pic.parent();
            //Binding the progress bar
            var progressBg = $("<div></div>").css({
                width: parent.width() - 200,
                height: 10,
                backgroundColor: "black",
                position: "absolute",
                    "bottom": 60,
                left: 100
            }).addClass("progressBg");
            var progressBar = $("<div></div>").css({
                width: 0,
                height: 10,
                backgroundColor: "white",
                position: "absolute",
                    "bottom": 60,
                left: 100
            }).data("progress",...