'How do i add arrows in specific part of the 360 image to move to another 360 image

I coded this 360 image slider, but my main objective was to create a slider with arrows inside the 360 image at specific parts and on hovering, for 5sec it will move the image linked with that arrow.

example what I wanted:(https://www.360cities.net/image/hagia-sophia-constantinople-istanbul-3);

how do I add a VR glass option (i tried things from youtube but not working)

html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    
    <div id="arrowAndImg">
        <img class="arrows" id = "left" src="download.png">
        <div class="loadingImages">
        </div>
        <img class="arrows" id="right" src="download.png">
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

CSS

 .loadingImages {
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:100vw;
}
.loadingImages iframe {
    height:100%;
    width:100%;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#arrowAndImg{
    display: flex;
    flex-wrap: nowrap;
}
#left{
    transform: scaleX(-1);
    left:1rem;
}

#right{
    right:1rem;
}

.arrows{
    height: 100px;
    width: 100px;
    position:fixed;
    z-index:100;
    top:calc(50% - 50px);
}

JS

function loadImagesInSequence(images) {
    if (!images.length) {
        return;
    }
    var parent = document.getElementsByClassName("loadingImages")[0];
    var arr=[];
    for (var i = 0; i < images.length; i++){
        var img = document.createElement("iframe");
        img.src = images[i];
        arr.push(img);
    }
    parent.appendChild(arr[currIndex]);
    leftArrow.addEventListener("click", function (){
        parent.removeChild(arr[currIndex]);
        currIndex--;
        if (currIndex === -1)
            currIndex = arr.length-1;
        parent.appendChild(arr[currIndex]);
    });
    rightArrow.addEventListener("click", function (){
        parent.removeChild(arr[currIndex]);
        currIndex++;
        currIndex %= arr.length;
        parent.appendChild(arr[currIndex]);
    });

}
var arrows = document.getElementsByClassName("arrows");
var leftArrow = arrows[0], rightArrow = arrows[1];
var currIndex = 0;
loadImagesInSequence(['hhttps://youtu.be/hNAbQYU0wpg', 'https://momento360.com/e/u/30d3258a4482462ca26662d7b0a616cd?utm_campaign=embed&utm_source=other&heading=0&pitch=0&field-of-view=75&size=medium', 'https://momento360.com/e/u/aac7474e56764b34ae60da2c0c3807d6?utm_campaign=embed&utm_source=other&heading=0&pitch=0&field-of-view=75&size=medium']);
javascripthtmlcssiframe-resizer


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions