JSFiddle - React, Tailwind, and code Playground

by Jonathan Quintin

HTML

<script src="http://bacasable-lab.fr/new/js/vendor/svg.min.js"></script>
<div id="canvas"></div>
<div id="canvas2"></div>

CSS

html, body {
	width: 100%;
	height: 100%;
    overflow: hidden;
}

#canvas, #canvas2 {
	width: 256px;
	height: 144px;
	margin: 0 0 5px;
}

JavaScript

'use strict';
var json = [{"id":"1","nom":"cocotte","description":"cocotte1234","img_src":"img/test1.jpg"},{"id":"2","nom":"loreal","description":"loreal loreal loreal 32213 loreal","img_src":"img/test2.jpg"},{"id":"3","nom":"nana","description":"nana....","img_src":"img/test3.jpg"},{"id":"4","nom":"cocotte","description":"cocotte90","img_src":"img/test4.jpg"}];
var SvgTests = (function(JQUERY){
	var SvgTests = function (params){
		var defaults = {
					_item : 'canvas',
					_duration : 650
				};
        
        this.images = [],
		this.options = JQUERY.extend({}, defaults, params);
	};
	SvgTests.prototype = {
		constructor : SvgTests,
		options : {},
		draw : null,
		svg : null,
		_width : 0,
		_height : 0,
		rect : null,
		_boxW : 100,
		_angle : null,
		_simpleUp : 0,
		_isSliding : 0,
		_maxSliding : null,
		isLocalStorage : 0,
		simpleUp : 0,
		i : null,
		init : function init (){
			this._width =1920;
			this._height = 1080;
			this.draw = SVG(this.options._item);
			this.svg = JQUERY('#'+this.options._item).find('svg')[0];
			this.svg.setAttribute('viewBox', '0 0 '+this._width+' '+this._height);
			this.svg.setAttribute('preserveAspectRatio', 'xMidYMid slice');
			this._maxSliding = json.length;
			this.drawScene(json);
		},
		drawScene : function drawScene (_e){
			var _l = _e.length;
            console.log(this.images);
			for(this.i= 0; this.i < _l; ++this.i){
				var len = this.images[this.i] = this.draw.image('http://bacasable-lab.fr/new/'+_e[this.i].img_src, this._width, this._height); // Return length of array.
				this.images[this.i].style('cursor', 'pointer');
				this.images[this.i].data('nom', _e[this.i].nom);
				this.images[this.i].data('description', _e[this.i].description);
			}
            console.log(this);
            console.log(this.images);
			this.i -= 1;
			this.rect = this.draw.rect(.2, this._height);
			this.bindMouseWheel();
		},
		extractDelta : function extractDelta (_e){
			if (_e.wheelDelta)	return _e.wheelDelta;
			if...