problem ze sliderem javascript na stronie html

Question

Witam, mam nietypowy problem i nie mam pojęcia jak go rozwiązać (?),

A mianowicie, robię stronę typu sklep internetowy (z nudów i z chęci szkolenia się w pisaniu stron internetowych)

Przejdziemy od razu do sedna sprawy:

Po kliknięciu produktu wyskakuje mi modalbox (zdjęcia poniżej)

 

 

 

Slider który zaznaczyłem jest moim problemem, a mianowicie:

Strzałkami mogę przełączać na kolejne lub poprzednie zdjęcia, wszystko działa poprawnie, lecz jeśli wstawię go do kolejnych produktów nie działa prawidłowo, a mianowicie na 1 stronie z sliderem (zdjęcie powyżej) wszystko działa prawidłowo, lecz na w innych produktach wygląda on tak:

 

Nie pokazuje w ogóle zdjęć i sa tylko strzałki od przejścia do innych zdjęć, co ciekawe kiedy naciskam te przyciski slider zmienia zdjęcia w 1 produkcie. Co może być przyczyną > da się coś z tym zrobić? poniżej daję kod:

<style>
body { color: #444; font-family: Helvetica, sans-serif; margin: 0; background: #ECECEC; }


#zdjecia1{
	    float: left;
        width: 690px;	
        margin-top: 14px;
		min-height: 250px; 
		margin-right: 14px;
		text-align: center;
}

#opis_wstepny1{
	
	  float: left;
        width: 400px;	
        margin-top: 14px;
		min-height: 390px;
}

#opis_pelny1{
	
	  float: left;
        width: 98%;	
        margin-top: 14px;
		min-height: 900px;
}

#btn1{
	
	  float: left;
        width: 100%;	
        margin-top: 60px;
		min-height: 100px;
}
		</style>
		
		
		
		            
		<div id="zdjecia1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
.w3-content{max-width:980px;margin-left:100px}.w3-rest{overflow:hidden}
.w3-display-container{position:relative}
.w3-display-container:hover
.w3-display-container:hover span
.w3-center{text-align:center!important}
.w3-container:after,.w3-container:before,
.w3-large{font-size:18px!important}
.w3-left{float: left; }.w3-right{float: right;!important}
.w3-hover-text-khaki:hover{color:#b4aa50!important}
.w3-down{margin-top: 0px; }
.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
.w3-display-bottommiddle{position:relative;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-500%,0%)}
.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:0px;padding-right:0px;text-align:center}.w3-badge{border-radius:50%}
</style>

<div class="w3-content w3-display-container" style="width:600px">
  <center><img class="mySlides" src="../jpg/png/lap1/1a.png" style="width:100%"></center>
  <center><img class="mySlides" src="../jpg/png/lap1/2a.png" style="width:100%"></center>
  <center><img class="mySlides" src="../jpg/png/lap1/3a.png" style="width:100%"></center>
    <center><img class="mySlides" src="../jpg/png/lap1/4a.png" style="width:100%"></center>
  <center><img class="mySlides" src="../jpg/png/lap1/5a.png" style="width:100%"></center>
  <center><img class="mySlides" src="../jpg/png/lap1/6a.png" style="width:100%"></center>
  <div class="w3-center w3-container w3-section w3-large w3-text-black w3-display-bottommiddle" style="width:50%">
    <div class="w3-left w3-hover-text-khaki w3-down" onclick="plusDivs(-1)"><h1><</h1></div>
    <div class="w3-right w3-hover-text-khaki w3-down" onclick="plusDivs(1)"><h1>></h1></div>
  </div>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-black", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-black";
}
</script>
</center>
    </div>

Dodam kody z modalbox'ów:

<div id="openOfer4" class="modalDialog1">
	<div>
		<a href="#close" title="Zamknij" class="close">X</a>
		<br>
		<div id="nazwa">
		<center><h2><b>Lenovo IdeaPad 100-15IBD (80QQ01EWPB)</b></h2></center>
		</div>
		<div style="height: 690px; width: 1150px; overflow-x: hidden;">
		
		<?php
         require 'php/laptopy/ofer4/ofer4.php';
		 ?>
	
		</div>
		</div>

	</div>
	
	<div id="openOfer5" class="modalDialog1">
	<div>
		<a href="#close" title="Zamknij" class="close">X</a>
		<br>
		<div id="nazwa">
		<center><h2><b>HP 250 G6 (2LB85EA)</b></h2></center>
		</div>
		<div style="height: 690px; width: 1150px; overflow-x: hidden;">
		
		<?php
         require 'php/laptopy/ofer5/ofer5.php';
		 ?>
	
		</div>
		</div>

	</div>

 

Answer 1

Nigdzie nie podałes struktury slidera. Zapewne znajduje się ona w plikach ofer(N).php ale nikt nie będzie wróżył z kart.

Najlepiej napisz do tego slidera funkcję która go obsługuje i uruchom ją dla każdego slidera, podpinając do niej odpowiedni element.

I jesli chcesz, żeby nauka nie poszła w las, to nie używaj biblioteki od w3, to jest samo zło. Pisz w czystym css, a najlepiej sass/less.

Comments

Kod slidera jest podany wyżej