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

145
February 23, 2022, at 06:30 AM

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']);
Rent Charter Buses Company
READ ALSO
Wobbly rendering when resetting value of v-radio component

Wobbly rendering when resetting value of v-radio component

I am using v-radio components with a custom label like this:

121
How to change page color on scroll with fixed background

How to change page color on scroll with fixed background

I have a WordPress website runningI am trying to design something unique

136
How to move the window by x number of pixels using Javascript

How to move the window by x number of pixels using Javascript

How do I scroll a window or webpage down using Javascript? Basically, I want to move the web page down by certain number of pixels, using Javascript is there any way of doing that?

135
multiple pages are overlapping in ngx-extended-pdf-viewer

multiple pages are overlapping in ngx-extended-pdf-viewer

I am using ngx-extended-pdf-viewer for my angular app and looks like multiple pdf pages are overlapping during viewinghere is my viewer code

125