diaprojekcija - trgovina, slideshow store
X
Diaprojekcija - Trgovina
ZAŽENI
<!DOCTYPE html> <html lang="sl"> <head> <meta charset="UTF-8"> <title>diaprojekcija</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .productsContainer { position: relative; max-width: 100%; margin: auto; overflow: hidden; padding: 0 60px; /* prostor za puščice */ } .productsMain { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .productsBox { display: flex; flex-direction: column; padding: 16px; background: #f9f9f9; border: 1px solid lightblue; border-radius: 10px; overflow: hidden; text-decoration: none; opacity: 0.6; } .productsBox a { text-decoration: none; color: black; } .productsBox:hover { opacity: 1; } .productsBox img { max-width: 100%; border-radius: 10px; margin-bottom: 10px; } .buttonsMain { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.9); border: 1px solid lightgrey; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; font-size: 16px; cursor: pointer; z-index: 10; } .buttonsMain.left { left: 10px; } .buttonsMain.right { right: 10px; } .buttonsMain.disabled { opacity: 0.3; pointer-events: none; } /* Prilagoditev za manjše zaslone */ @media (max-width: 920px) { .productsMain { grid-template-columns: repeat(2, 1fr); /* 2 stolpca */ } .productsContainer { padding: 0 30px; /* Manj prostora za puščice */ } } @media (max-width: 480px) { .productsMain { grid-template-columns: 1fr; /* 1 stolpec */ } } </style> </head> <body> <div class="productsContainer"> <!-- LEVA PUŠČICA --> <div class="buttonsMain left" onclick="plusSlides(-1, 0)"><span><<</span></div> <div class="productsMain"> <div class="productsBox"> <a href="#"> <div class="imgBox"> <img src="/demo/trgovina.png" alt="Izdelek 1"> </div> <div class="textBox"> <h3>DEMO 01</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">19,99 €</div> </a> </div> <div class="productsBox"> <a href="#"> <div class="imgBox"> <img src="/demo/trgovina.png" alt="Izdelek 2"> </div> <div class="textBox"> <h3>DEMO 02</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">29,99 €</div> </a> </div> <div class="productsBox"> <a href="#"> <div class="imgBox"> <img src="/demo/trgovina.png" alt="Izdelek 3"> </div> <div class="textBox"> <h3>DEMO 03</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">39,99 €</div> </a> </div> <div class="productsBox"> <a href="#"> <div class="imgBox"> <img src="/demo/trgovina.png" alt="Izdelek 4"> </div> <div class="textBox"> <h3>DEMO 04</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">49,99 €</div> </a> </div> <div class="productsBox"> <a href="#"> <div class="imgBox"> <img src="/demo/trgovina.png" alt="Izdelek 4"> </div> <div class="textBox"> <h3>DEMO 05</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">59,99 €</div> </a> </div> </div> <!-- DESNA PUŠČICA --> <div class="buttonsMain right" onclick="plusSlides(1, 0)"><span>>></span></div> </div> <div class="productsContainer"> <!-- LEVA PUŠČICA --> <div class="buttonsMain left" onclick="plusSlides(-1, 0)"><span><<</span></div> <div class="productsMain"> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 06</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">999,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 07</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">999,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 08</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">999,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 09</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">999,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 10</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">999,75 €</div> </a> </div> </div> <!-- DESNA PUŠČICA --> <div class="buttonsMain right" onclick="plusSlides(1, 0)"><span>>></span></div> </div> <div class="productsContainer"> <!-- LEVA PUŠČICA --> <div class="buttonsMain left" onclick="plusSlides(-1, 0)"><span><<</span></div> <div class="productsMain"> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 11</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">99,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 12</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">99,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 13</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">99,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 14</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">99,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 15</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">99,75 €</div> </a> </div> </div> <!-- DESNA PUŠČICA --> <div class="buttonsMain right" onclick="plusSlides(1, 0)"><span>>></span></div> </div> <div class="productsContainer"> <!-- LEVA PUŠČICA --> <div class="buttonsMain left" onclick="plusSlides(-1, 0)"><span><<</span></div> <div class="productsMain"> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 16</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">99,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 17</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">99,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 18</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">99,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 19</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">99,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 20</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">99,75 €</div> </a> </div> </div> <!-- DESNA PUŠČICA --> <div class="buttonsMain right" onclick="plusSlides(1, 0)"><span>>></span></div> </div> <div class="productsContainer"> <!-- LEVA PUŠČICA --> <div class="buttonsMain left" onclick="plusSlides(-1, 0)"><span><<</span></div> <div class="productsMain"> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 21</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">999,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 22</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">999,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 23</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">999,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 24</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">999,75 €</div> </a> </div> <div class="productsBox"> <a href=""> <div class="imgBox"> <img src="/demo/trgovina.png" alt="web"> </div> <div class="textBox"> <h3>DEMO 25</h3> <p>Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let, saj je to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja.</p> </div> <div class="priceBox">999,75 €</div> </a> </div> </div> <!-- DESNA PUŠČICA --> <div class="buttonsMain right" onclick="plusSlides(1, 0)"><span>>></span></div> </div> <script> let slideIndex = [0, 0]; // Izbira trenutnega diapozitiva za vsako sekcijo let slideId = ["productsMain", "productsMain"]; // ID-ji vseh sekcij (vsaka sekcija ima svoj class) // Inicializacija za vsako sekcijo posebej showSlides(1, 1); // Inicializiramo prvo sekcijo (diapozitivi 1-5) // Funkcija za ročno premikanje diapozitivov function plusSlides(n, no) { let slides = document.getElementsByClassName(slideId[no]); // Preprečimo premajhen ali prevelik indeks if ((slideIndex[no] + n) < 0 || (slideIndex[no] + n) >= slides.length) { return; // Če gremo ven iz mej, nič ne naredimo } slideIndex[no] += n; showSlides(slideIndex[no], no); } // Glavna funkcija za prikazovanje diapozitivov določene sekcije function showSlides(n, no) { // Pridobimo vse diapozitive za izbrano sekcijo let slides = document.getElementsByClassName(slideId[no]); let leftButton = document.querySelectorAll('.productsContainer .buttonsMain.left')[no]; let rightButton = document.querySelectorAll('.productsContainer .buttonsMain.right')[no]; // Omejimo indeks diapozitiva znotraj dovoljenih meja if (n >= slides.length) { slideIndex[no] = slides.length - 1; // Zadnji indeks za to sekcijo } if (n < 0) { slideIndex[no] = 1; // Prvi indeks za to sekcijo } // Skrijemo vse diapozitive iz te sekcije for (let i = 0; i < slides.length; i++) { slides[i].style.display = "none"; // Skrijemo diapozitiv } // Prikažemo trenutni diapozitiv slides[slideIndex[no]].style.display = "grid"; } </script> </body> </html>