• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

0 głosów
51 wizyt
pytanie zadane 10 marca w JavaScript, jQuery, AJAX przez Sobol3k Użytkownik (560 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 przez PolYGlok Pasjonat (17,990 p.)
z czym masz problem?
komentarz 10 marca przez PolYGlok Pasjonat (17,990 p.)
Co to jest 'x'??????
komentarz 11 marca przez Sobol3k Użytkownik (560 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 przez Sobol3k Użytkownik (560 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 przez pablop76 Szeryf (91,270 p.)
edycja 11 marca 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
komentarz 11 marca przez Sobol3k Użytkownik (560 p.)
Z tym przeniesieniem warunku przed inkrementację to rzeczywiście nie pomyślałem. Dziękuję za rade w domu to powinienem już ogarnąć.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 127 wizyt
+1 głos
1 odpowiedź 147 wizyt
pytanie zadane 19 sierpnia 2016 w JavaScript, jQuery, AJAX przez Widemo Użytkownik (920 p.)
0 głosów
1 odpowiedź 75 wizyt
pytanie zadane 8 lipca 2018 w JavaScript, jQuery, AJAX przez bicnet Gaduła (4,110 p.)
Porady nie od parady
Publikując kody źródłowe korzystaj ze specjalnego bloczku koloryzującego składnię (przycisk z napisem code w edytorze). Nie zapomnij o ustawieniu odpowiedniego języka z rozwijanego menu oraz czytelnym formatowaniu kodu.Przycisk code

63,266 zapytań

109,521 odpowiedzi

228,794 komentarzy

43,507 pasjonatów

Przeglądających: 171
Pasjonatów: 3 Gości: 168

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...