diaprojekcija slike, slideshow gallery

diaprojekcija slike, slideshow gallery

X

Diaprojekcija - Slike

Diaprojekcija je način predstavitve serije slik ali diapozitivov, ki se prikazujejo ena za drugo. Ta tehnika se pogosto uporablja za predstavitve, predavanja, foto albume ali druge vizualne prikaze informacij.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>diaprojekcija</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<style>
        .productsMainPic1, .productsMainPic2, .productsMainPic3 {
            display: flex;
            justify-content: center;
            width: 50%;
            height: 400px;
            margin: 0 auto 30px;
        }
        .productsMainPic1 .buttonsMain {
            width: 30px;
            height: 100%;!important;
            text-align: center;
            line-height: 24em;
            cursor: pointer;
        }
        .productsMainPic1 .buttonsMain span:hover {
            transition: 0.3s;
            transform: scale(1.5);
            color: red;
            filter: drop-shadow(1px 1px 2px blue);
        }
        .productsMainPic1 img {
            width: 100%;
        }
        .productsMainPic2 .buttonsMain {
            width: 30px;
            height: 100%;!important;
            text-align: center;
            line-height: 24em;
            cursor: pointer;
        }
        .productsMainPic2 .buttonsMain span:hover {
            transition: 0.3s;
            transform: scale(1.5);
            color: red;
            filter: drop-shadow(1px 1px 2px blue);
        }
        .productsMainPic2 img {
            width: 100%;
        }
        .productsMainPic3 .buttonsMain {
            width: 30px;
            height: 100%;!important;
            text-align: center;
            line-height: 24em;
            cursor: pointer;
        }
        .productsMainPic3 .buttonsMain span:hover {
            transition: 0.3s;
            transform: scale(1.5);
            color: red;
            filter: drop-shadow(1px 1px 2px blue);
        }
        .productsMainPic3 img {
            width: 100%;
        }

@media screen and (max-width: 1024px){
            .productsMainPic1, .productsMainPic2, .productsMainPic3 {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div class="productsMainPic1">
    <div class="buttonsMain" onclick="plusSlides(-1, 0)"><span><<</span></div>
    <img src="/demo/narava1.png" alt="narava1">
    <div class="buttonsMain" onclick="plusSlides(1, 0)"><span>>></span></div>
</div>

<div class="productsMainPic1">
    <div class="buttonsMain" onclick="plusSlides(-1, 0)"><span><<</span></div>
    <img src="/demo/narava2.png" alt="narava2">
    <div class="buttonsMain" onclick="plusSlides(1, 0)"><span>>></span></div>
</div>

<div class="productsMainPic1">
    <div class="buttonsMain" onclick="plusSlides(-1, 0)"><span><<</span></div>
    <img src="/demo/narava3.png" alt="narava3">
    <div class="buttonsMain" onclick="plusSlides(1, 0)"><span>>></span></div>
</div>

<div class="productsMainPic2">
    <div class="buttonsMain" onclick="plusSlides(-1, 1)"><span><<</span></div>
    <img src="/demo/narava4.png" alt="narava4">
    <div class="buttonsMain" onclick="plusSlides(1, 1)"><span>>></span></div>
</div>

<div class="productsMainPic2">
    <div class="buttonsMain" onclick="plusSlides(-1, 1)"><span><<</span></div>
    <img src="/demo/narava5.png" alt="narava5">
    <div class="buttonsMain" onclick="plusSlides(1, 1)"><span>>></span></div>
</div>

<div class="productsMainPic2">
    <div class="buttonsMain" onclick="plusSlides(-1, 1)"><span><<</span></div>
    <img src="/demo/narava6.png" alt="narava6">
    <div class="buttonsMain" onclick="plusSlides(1, 1)"><span>>></span></div>
</div>

<div class="productsMainPic3">
    <div class="buttonsMain" onclick="plusSlides(-1, 2)"><span><<</span></div>
    <img src="/demo/narava7.png" alt="narava7">
    <div class="buttonsMain" onclick="plusSlides(1, 2)"><span>>></span></div>
</div>

<div class="productsMainPic3">
    <div class="buttonsMain" onclick="plusSlides(-1, 2)"><span><<</span></div>
    <img src="/demo/narava8.png" alt="narava8">
    <div class="buttonsMain" onclick="plusSlides(1, 2)"><span>>></span></div>
</div>

<div class="productsMainPic3">
    <div class="buttonsMain" onclick="plusSlides(-1, 2)"><span><<</span></div>
    <img src="/demo/narava9.png" alt="narava9">
    <div class="buttonsMain" onclick="plusSlides(1, 2)"><span>>></span></div>
</div>

<script>
    // slideshow
    let slideIndex = [1, 1, 1];
    let slideId = ["productsMainPic1", "productsMainPic2", "productsMainPic3"]
    showSlides(1, 0);
    showSlides(1, 1);
    showSlides(1, 2);

function plusSlides(n, no) {
        showSlides(slideIndex[no] += n, no);
    }

function showSlides(n, no) {
        let i;
        let slides = document.getElementsByClassName(slideId[no]);

if (n > slides.length) {
            slideIndex[no] = 1
        }

if (n < 1) {
            slideIndex[no] = slides.length
        }

for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slides[slideIndex[no]-1].style.display = "flex";
    }
</script>
</body>
</html>