JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<script src="http://roadrash.no/hs-support/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://roadrash.no/hs-support/highslide/highslide.css">
<div class="highslide-gallery" style="width: 400px">
    <a class='highslide' href='http://turiscam.gva.es/webcams/calpec.jpg'  onclick="return hs.expand(this, galleryOptions)">
        <IMG src="cam1.jpg" class="links" width="220" height="150" border="1" name="visiongs1" onload="LoadImg1()" onerror="ErrorImg1()" alt=' '/>
    </a>
</div>
<div class="highslide-gallery2" style="width: 400px">
    <a class='highslide' href='http://turiscam.comunitatvalenciana.com/calp.jpg'  onclick="return hs.expand(this, galleryOptions)">
        <IMG src="cam2.jpg" class="rechts" width="220" height="150" border="2" name="visiongs2" onload="LoadImg2()" onerror="ErrorImg2()" alt=' '/>
    </a>
</div>

CSS

/* remove the full-expand button from the controlbar */
.text-controls .highslide-full-expand span {
	display: none;
}

JavaScript

<!--
var t1 = 10 // interval in seconds
imgsrc1 = "http://turiscam.gva.es/webcams/calpec.jpg";
function ErrorImg1() {
setTimeout("LoadImg1()", t1*300);
}
function LoadImg1() {
if (imgsrc1 == "") imgsrc1 = document.images.visiongs1.src;
document.images.visiongs1.onload = ""; 
tmp = new Date();
tmp = "?"+tmp.getTime();
document.images.visiongs1.src = imgsrc1+tmp;
setTimeout("LoadImg1()", t1*300);
}



<!--
var t2 = 10 // interval in seconds
imgsrc2 = "http://turiscam.comunitatvalenciana.com/calp.jpg";
function ErrorImg2() {
setTimeout("LoadImg2()", t2*300);
}
function LoadImg2() {
if (imgsrc2 == "") imgsrc2 = document.images.visiongs2.src;
document.images.visiongs2.onload = ""; 
tmp = new Date();
tmp = "?"+tmp.getTime();
document.images.visiongs2.src = imgsrc2+tmp;
setTimeout("LoadImg2()", t2*300);
}



// rotate the image inside the hs.useBox gallery 
// requires highslide-full.js, jQuery and jQuery Rotate (https://code.google.com/p/jqueryrotate/)

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.align = 'center';
hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-black';
hs.marginBottom = 45; // make room for the controlbar

// Add the slideshow providing the controlbar and the thumbstrip

hs.addSlideshow({
    // slideshowGroup: 'mixed',
    interval: 2000,
    repeat: true,
    useControls: false,
    overlayOptions: {
        className: 'text-controls',
        position: 'bottom center',
        relativeTo: 'viewport',
        offsetY: -10,
        zIndex: 5
    }
});

var galleryOptions = {
    transitions: ['expand', 'crossfade'],
    fadeInOut: false,
    useBox: false,
    autoplay: true,
    width: 600, // change the value to fit your need
    height: 600, // change the value to fit your need
    captionEval: 'this.thumb.alt',
    numberPosition: 'false'
};

// rotate function
hs.Expander.prototype.onAfterExpand = function (sender) {
    var angle = 0;
    $('.highslide-rotate a').on('click', function () {
        angle += 90;
       ...