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>