• 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
55 wizyt
pytanie zadane 10 marca w JavaScript, jQuery, AJAX przez Sobol3k Użytkownik (670 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 (18,450 p.)
z czym masz problem?
komentarz 10 marca przez PolYGlok Pasjonat (18,450 p.)
Co to jest 'x'??????
komentarz 11 marca przez Sobol3k Użytkownik (670 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 (670 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 (96,690 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 (670 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ź 135 wizyt
+1 głos
1 odpowiedź 151 wizyt
pytanie zadane 19 sierpnia 2016 w JavaScript, jQuery, AJAX przez Widemo Użytkownik (920 p.)
0 głosów
1 odpowiedź 67 wizyt
pytanie zadane 23 maja w HTML i CSS przez tgv Początkujący (400 p.)
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

65,740 zapytań

112,380 odpowiedzi

237,255 komentarzy

46,695 pasjonatów

Przeglądających: 222
Pasjonatów: 9 Gości: 213

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.

...