Slider działa ale nie do końca tak jak pownien

pytanie zadane 10 marca 2019 w JavaScript przez Sobol3k Użytkownik (690 p.)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body{
            display: flex;
            margin: 0;
            padding: 0;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }
        
        .container-slider{
            position: relative;
            width: 650px;
            min-width: 350px;
            height: 350px;
            border: 5px solid black;
            border-radius: 5px;
            padding: 5px;
            box-sizing: border-box;
        }
        
        .container-slider > img{
            width: 100%;
            height: 100%;
        }
        
        .container-slider::after{
            content: '';
            position: absolute;
            display: block;
            left: 0;
            top: 0;
            width: 15%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); 
        }
        
        .container-slider::before{
            content: '';
            position: absolute;
            display: block;
            right: 0;
            top: 0;
            width: 15%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); 
        }
        
        .container-slider > span.back-btn{
            position: absolute;
            display: block;
            top: 50%;
            left: 2.5%;
            border-bottom: 40px solid black;
            border-right: 40px solid transparent;
            border-left: 40px solid transparent;
            transform: rotate(-90deg) translateY(-50%);
            z-index: 999;
        }
        
        .container-slider > span.next-btn{
            position: absolute;
            display: block;
            top: 50%;
            right: 2.5%;
            border-bottom: 40px solid black;
            border-right: 40px solid transparent;
            border-left: 40px solid transparent;
            transform: rotate(90deg) translateY(-50%);
            z-index: 999;
        }
        
    </style>
</head>
<body>
<div class="container-slider">
  <span class="back-btn btn"></span>
  <img src="" title="something" lang="pl">
  <span class="next-btn btn"></span>
</div>
<script>
    document.addEventListener("DOMContentLoaded", () => {
    
        var picture = 1;
        
        let img = document.querySelector('.container-slider > img');
        img.src = picture + '.jpg';
        
        const btnBack = document.querySelector('.back-btn');
        const btnNext = document.querySelector('.next-btn');
        const tab = [btnBack, btnNext]

        for(let btn of tab){
            
            btn.addEventListener("click", function(e){
                
                if(btn.classList.contains('next-btn')){
                    
                    img.src = ++picture + '.jpg';
                    
                    if(picture === 3){
                        
                         console.log('x');
                         e.preventDefault();
                    }
                }
                else{
                    
                    img.src = --picture + '.jpg';
                    
                    if(picture === 1){
                        
                        console.log('x');
                        e.preventDefault();
                    }
                    
                }
                
            });
            
        }
        
    }, false);
    
</script>
</body>
</html>

Zrobiłem prosty slider działa, ale nie do końca tak jak powinien to znaczy kiedy zmienna - > picture przetrzymująca numer wczytanego slajdu wynosi 3 lub 1 powinna odpalić się funkcja e.preventDault() by zablokować przejście do slajdu którego nie ma lecz to i tak nie nie dało.

komentarz 10 marca 2019 przez PolYGlok Pasjonat (19,450 p.)

z czym masz problem?

komentarz 10 marca 2019 przez PolYGlok Pasjonat (19,450 p.)

Co to jest 'x'??????

komentarz 11 marca 2019 przez Sobol3k Użytkownik (690 p.)

x to jest zwykły tekst, który wyświetliłem w celu sprawdzenia czy instrukcja warunkowa rzeczywiście wykrywa że zmienna picture jest równa 3 :) można wywalić z kodu.

komentarz 11 marca 2019 przez Sobol3k Użytkownik (690 p.)

Chodzi mi o to że w momencie kiedy dojdę do 3 obrazka to chciałbym aby przy następnym kliknięciu przycisku next odpaliła się funkcja preventDefault() aby zablokować zdarzenie click ponieważ nie ma już 4 obrazka do załadowania. To samo tyczy się, gdy dojdę do pierwszego to nie chciałbym aby po kliknięciu przycisku back zmienna miała wartość -1 bo nie mam takiego obrazka jak = > '-1.jpg'.

Próbowałem coś takiego

if(picture === 3){
    
   picture === 1;

   /* również próbowałem tego
   img.src = "1.jpg"; */                       
}

Skrypt to ignoruje i idzie sobie dalej do 4.jpg - którego nie ma.

komentarz 11 marca 2019 przez pablop76 VIP (123,120 p.)
edycja 11 marca 2019 przez pablop76

preventDefault() mówi przeglądarce, że jeśli zdarzenie nie zostanie jawnie obsłużone, domyślne działanie nie powinno być podejmowane. Ma to zastosowanie np. przy type="submit" , albo przy linkach <a href=""></a> ponieważ przeglądarka domyślnie udaje się pod podany atrybut.

Jeżeli chcesz wyjść z if to użyj return i przenieś sprawdzenie przed inkrementację. Przecież nie chcesz jej wykonać jeżeli warunek jest spełniony