Imagesslider mit einem Sprunganker verlinken

[frog]

Hallo, liebe Leute!

Ich hab mal wieder eine Frage, weil ich überhaupt nicht weiterkomme!! Für einen kleinen Tipp wäre ich echt Dankbar!

Für meine Webseite habe ich zwei Slider in JS programmiert. Einer befindet sich auf der Startseite und zeigt Vorschaubilder in Form von Thumbnails. Der zweite Slider befindet sich auf einer weiteren Seite, auf der man dann die Bilder als Vollansicht im gesamten Browserfenster sehen kann, auf dieser Seite befindet sich klarerweise auch eine Navigationsleiste mit Kontaktdaten, Lebenslauf etc. Wenn ich nun auf das z.B. dritte Bild des Thumbnail-Sliders klicke, soll der User auf das dritte Bild des grossen Sliders auf der nächsten Seite gelangen, welcher durch einen Pfeil nach links und recht navigierbar ist.

Jetzt hab ich die Thumbnails mit einer id verlinkt. Also z.B. "zweite_seite.html#one“ und dem goßen Image genau diese id verpasst. Das klappt auch, auf welches thumb ich auch klicke, ich komm genau auf die richtige Vollbildversion.

Das Problem ist allerdings, dass ab dem zweiten Bild meine gesamte Navigationsleiste nicht mehr angezeigt wird und, wenn ich das Browserfenster grösser oder kleiner ziehe, skaliert sich nicht das einzelne Bild, so wie es sein sollte, sondern der gesamte Slider. Da verrutscht also alles. Also nur das erste Bild fügt sich ins Browserfenster richtig ein und auch die Nav erscheint!

Ich habs auch mit ...

document.anchors[0].one;

... und mit ...

window.location.hash="one";

... versucht, hab aber das gleiche Problem wie oben beschrieben!

Meine Frage ist, wie und wo kann ich den Sprunganker so integrieren, dass sich nicht nur das erste Vollbild-Image an das Browserfenster anpasst und meine NavLeiste erscheint, sondern dass das auch bei den restlichen so ist? Irgendwie schwant mir hier eine forEach oder for-Schleife. Ich bin aber jetzt komplett überfordert!!

hier nun der HtmlCode für die Startseite:

<div class="contentThumb">
      <div class="thumb">
          <span class="active2"></span>
  <div><a href = "zweite_seite.html#one"><img class="thumbnail" src="thumb01.gif" alt=""></a></div>
  <div><a href = "zweite_seite.html#two"><img class="thumbnail" src="thumb01.gif" alt=""></a></div>
  <div><a href = "zweite_seite.html#three"><img class="thumbnail" src="thumb01.gif" alt=""></a></div>
  <div><a href = "zweite_seite.html#four"><img class="thumbnail" src="thumb01.gif" alt=""></a></div>   
  <div><a href = "zweite_seite.html#five"><img class="thumbnail" src="thumb01.gif" alt=""></a></div> 
  <div><a href = "zweite_seite.html#six"><img class="thumbnail" src="thumb01.gif" alt=""></a></div>
 </div>
        </div>

JS-Code für den Thumb-Slider der Startseite

    var leftArrow = document.querySelector('.oneLeft');
    var rightArrow = document.querySelector('.oneRight');
    var cont = document.querySelectorAll('.thumb');    
    
    var thumbIndex = 0;         
        
      leftArrow.addEventListener("click", function(){
         thumbIndex = (thumbIndex > 0) ? thumbIndex - 1 : 0;
         cont[0].style.transform = "translate(" + (thumbIndex) * -127 + "px)";
        if(thumbIndex == 0){
             leftArrow1.style.opacity="0";
            }else if(thumbIndex >= 1){
             rightArrow1.style.opacity="0.4";
            }    
        }); 
      

 rightArrow.addEventListener("click", function(){
         thumbIndex = (thumbIndex < 5) ? thumbIndex + 1 : 5;
         cont[0].style.transform = "translate(" + (thumbIndex) * -127 + "px)";
         if(thumbIndex >= 5){
             rightArrow1.style.opacity="0";
            }else if(thumbIndex >= 1){
              leftArrow1.style.opacity="0.4";  
            } 
      }); 

Html für die zweite Seite als Vollbild:

   <div id="wrapper">
    <div class="picture_container">     
     <div class="carousel">
         <div class="slider">
             
<section id="one" class=“sec“> <img src=„bild01.jpg" alt="" type="image/jpg"/></section>
             
<section id="two" class=“sec“><img src="bild02.jpg" alt="" type="image/jpg"/></section>
             
<section id="three" class=“sec“><img src="bild03.jpg" alt="" type="image/jpg"/></section>  
             
<section id="four" class=“sec“><img src="bild04.jpg" alt="" type="image/jpg"/></section>    
             
<section id="five" class=“sec“> <img src="bild05.jpg" alt="" type="image/jpg"/></section>    
             
<section id="six" class=“sec“><img src="bild06.jpg" alt="" type="image/jpg"/></section>
             
    </div>            

//Navigationspfeile
    <div class="controls">
   <img class="pfeil links" src ="arrow-leftYellow.svg" alt="">
   <img class="pfeil rechts" src ="arrow-rightYellow.svg" alt="">
</div>  
  </div>  
    </div>      
        
</div> 

Zur Sicherheit hier auch das CSS für den Slider der zweiten Seite

~~~ css
#wrapper{
    display:flex;
    margin:25px auto;
}

.picture_container{
	 width:100%;
    height:auto;
    z-index:-100;
}

.carousel{
    display:flex;
    position:absolute;
    width:100%;
}

.slider{
    display:flex;
     width:400%;
     height:100%;
     transition: all 0.6s;
     
}

.slider section {
    display:flex;
    justify-content:center;
    align-items:center;
}

.controls{
    position:fixed;
    width:100%;
    heiht:auto;
    top:65%;
    cursor:pointer;
}


.links{
    position:fixed;
    height:220px;
    left:10px;
    -webkit-transition: all ease-in-out 600ms;
	  -moz-transition: all ease-in-out 600ms;
	  -ms-transition: all ease-in-out 600ms;
	   -o-transition: all ease-in-out 600ms;
	   transition: all ease-in-out 600ms;  
     opacity:0;
  }


 .rechts{
    position:fixed;
    height:220px;
    right:10px;
    -webkit-transition: all ease-in-out 600ms;
	 -moz-transition: all ease-in-out 600ms;
	 -ms-transition: all ease-in-out 600ms;
	 -o-transition: all ease-in-out 600ms;
	 transition: all ease-in-out 600ms;  
    opacity:0.2;
}

und hier der dazugehörige JS-Slider, den ich dann vermutlich bei jeden Klick auf das jeweilige thumbnail wieder änder muss.

var slider = document.querySelector('.slider'); 

    var leftPfeil = document.querySelector('.links');
    var rightPfeil = document.querySelector('.rechts'); 
    var sectionIndex = 0;


 leftPfeil.addEventListener("click", function(){
      sectionIndex = (sectionIndex > 0 ) ? sectionIndex - 1 : 0;
      slider.style.transform = "translate(" + (sectionIndex) * -25 + "%)";
          if(sectionIndex == 0 ){
             leftPfeil.style.opacity="0";     
              
        }else if(sectionIndex >= 1){
             rightPfeil.style.opacity="0.2";
   }
              
 });

rightPfeil.addEventListener("click", function(){
     sectionIndex = (sectionIndex < 5) ? sectionIndex + 1 : 5;
     slider.style.transform = "translate(" + (sectionIndex) * -25 + "%)";
         if(sectionIndex >= 5){
             rightPfeil.style.opacity="0";
   
       }else if(sectionIndex >= 1){
             leftPfeil.style.opacity="0.2";
            }    
 });	    

Ich bin für jeden Hinweis Dankbar!!