Sliderli Product Box Kodları :
<style>
.productBox{
display:block;
position:relative;
width:25%;
height:auto;
float:left;
box-sizing:border-box;
border:solid 1px #dedede;
border-radius:1rem;
padding:.3rem;
margin:.3%;
background:#fff;
}
.productImages{
position:relative;
width:100%;
height:auto;
display:block;
padding-bottom:100%;
box-sizing:border-box;
}
.productImage{
margin:auto;
max-width:85%;
height:auto;
display:none;
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;box-sizing:border-box;}
.productImage:nth-child(1){display:block;}
.imageThumbs{display:flex;width:100%;justify-content: center;margin:0px auto;}
.imageThumbsItem{
display:block;
border:solid 1px #dedede;
width:1rem;
height:1rem;
border-radius:50%;
margin:1%;
box-sizing:border-box;
cursor:pointer;
}
</style>
<script>
window.addEventListener("load",function(){
var parent;
var imgOrd;
var upParent;
var allItems=document.getElementsByClassName("imageThumbsItem");
for(i=0;i<allItems.length;i++){
allItems[i].addEventListener("mouseover",function(){
parent = this.parentElement;
imgOrd=Array.prototype.indexOf.call(parent.children, this);
upParent=parent.parentElement;
var underImgs=upParent.getElementsByTagName('img');
for (j=0;j<underImgs.length;j++){
underImgs[j].style.display="none";
}
underImgs[imgOrd].style.display="block";
});
}
});
</script>
<div class="productBox">
<div class="productImages">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Asv63bj3E2If7jgm-_GoroyOFZpResKSWFf65VtkyJ9846nhBW0Zz7pfAkB2NQZtCszwqSbE-IKJdL5eNzGQsUxZ0lJrsQAZtHxSxRWvYpz8wiJzxGSngYEVlmgSRBayX09wh8rZR1g/s0/a1.jpg" class="productImage" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg57pTPjVZ8VfbO6fK_mTP03MfS_ND0WIbDW6q0vcBUWBHTJjId-6egNww95QMdzHMb0wB131Dmj-GLMzvusAgX7ZfKgRVP75BBagHAB9a-hvLYjWeD5R_UM-oC1E2pt-0K0LkOtJR3ZX4/s0/a2.jpg" class="productImage" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Z9xNRo0ZtsvNISWZwN_G4kELyF9FhjFDJVmMaKYbn7q-lJ_visRrWPyzyo2kbX3Su8hARurzZkO4BzLq_nsgcfPsgwMKuQeDYx90aEfz-nDXrbtgOVcXKjlSLmxeuK2chLJ_ZcNTzuk/s0/a3.jpg" class="productImage" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRLx2sSCf2JKMPDCtMJGONO3wcq6YdHZ_5uf-aa9KE7xA6W2SmoHDDTkBChqY1PEjIxC7lpN66G_DtVMi2eRX1jLU_DqtyhhsFqwAyr1pfeeBVT5emo9NbfxVbc09NxcAlb4aPdB5-2zU/s0/a4.jpg" class="productImage" />
</div>
<div class="imageThumbs">
<div class="imageThumbsItem"></div>
<div class="imageThumbsItem"></div>
<div class="imageThumbsItem"></div>
<div class="imageThumbsItem"></div>
</div>
</div>
<div class="productBox">
<div class="productImages">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR63dmMfuGmzqa32XhiiufZcB2qqAYtf2q_s9pRl8tS7RjF2m5gPh12Wb6kyT-86VclBge1JXIL6ity5UizX6M9x0fmplSLWfE9sugLhJZq5mnLeakEfGtPzxTHPefF9i-avlr1Ky1ZZI/s0/b1.jpg" class="productImage" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGcaqGBrBYT4u-LRoBVwo4TtnMKcwlF3apcpNu9fjV3V2X8JYvz44S6He7_3CAgvMvMBpFZq2xg0fYDCTA7GL2ybC4MbLo66fzOemTGw_CagwBRZfV94IZ9Zpn1mD9z9UXnLI3CCPzgI/s0/b2.jpg" class="productImage" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8x0-DWQex4dM63FrGec1ZcjVIitZO5Q2Y3j9lhpqs4FjWTwPL2OrQUhn8kX_kpec9POvZKbY9UWxpSpZ8TyD6HkeFUIq7IjpOd2krE5jW1c9x_pwAYFN9NBjClYj8epCfldy33lDYQTw/s0/b3.jpg" class="productImage" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUBPUiKuvW9TM2noVoUt0onhU8zYCukU-vo2Hrhm-QBajI2US27BTQc72uZDxTefbunorwKCd0ys8IwPmnaouryysBuub4tqEOmBMhhXYM4JoHle1myXvJNNXNuophHb3NUBZOxJWVK08/s0/b4.jpg" class="productImage" />
</div>
<div class="imageThumbs">
<div class="imageThumbsItem"></div>
<div class="imageThumbsItem"></div>
<div class="imageThumbsItem"></div>
<div class="imageThumbsItem"></div>
</div>
</div>
<div style="display:block;width:100%;height:10px;clear:both;"> </div>
Saygılarımla...
Turgut ARSLAN