Sliderli Product Box Örneği

Sliderli Product Box Örneği

Şubat 18, 2021

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

Yorumlar