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

Slider - problem z czasem

0 głosów
69 wizyt
pytanie zadane 23 marca w JavaScript, jQuery, AJAX przez Majki Obywatel (1,410 p.)

Witam,

Niedawno wykonałem slider z poradnika, niestety w tym sliderze przełączenie obrazów powoduje zaburzenie 4-sekundowego cyklu, podobny problem Pan Zelent rozwiązywał w tym poradniku z tym, że nie wiem jak coś takiego zrobić tutaj :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="slideshow">
        <ul class="slider">
            <li>
                <img src="img/zdj1.jpeg" alt="">
                <section class="caption">
                    <h1>Lorem Ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti tenetur doloribus, aperiam tempore sapiente nostrum at? Rem obcaecati voluptas unde eaque repudiandae, voluptatum odit, beatae nostrum illo itaque earum.</p>
                </section>
            </li>
            <li>
                <img src="img/zdj2.jpeg" alt="">
                <section class="caption">
                    <h1>Lorem Ipsum 2</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti tenetur doloribus, aperiam tempore sapiente nostrum at? Rem obcaecati voluptas unde eaque repudiandae, voluptatum odit, beatae nostrum illo itaque earum.</p>
                </section>
            </li>
            <li>
                <img src="img/zdj3.jpeg" alt="">
                <section class="caption">
                    <h1>Lorem Ipsum 3</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti tenetur doloribus, aperiam tempore sapiente nostrum at? Rem obcaecati voluptas unde eaque repudiandae, voluptatum odit, beatae nostrum illo itaque earum.</p>
                </section>
            </li>
            <li>
                <img src="img/zdj4.jpeg" alt="">
                <section class="caption">
                    <h1>Lorem Ipsum 4</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti tenetur doloribus, aperiam tempore sapiente nostrum at? Rem obcaecati voluptas unde eaque repudiandae, voluptatum odit, beatae nostrum illo itaque earum.</p>
                </section>
            </li>
        </ul>
        <ol class="pagination">
            
        </ol>
    </div>

    <div class="left">
        <span class="fa fa-chevron-left"></span>
    </div>

    <div class="right">
        <span class="fa fa-chevron-right"></span>
    </div>

    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed facere fuga ducimus asperiores, quod tempore praesentium blanditiis! Quam ut nihil recusandae repudiandae, architecto est consequuntur neque quae nobis sapiente!</p>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script>
        $(function() {
            
            var imgPos = 1;
            
            for (
                i = 1; i <= $('.slider li').length; i++) {
                $('.pagination').append('<li><span class="fas fa-circle"></span></li>');
            }

            $('.slider li').hide();
            $('.slider li:first').show();
            $('.pagination li:first').css({
                'color': '#CD6E2E'
            });
            
            $('.pagination li').click(pagination);
            $('.right span').click(nextSlider);
            $('.left span').click(prevSlider);
            
            setInterval(function(){
                nextSlider();
            }, 4000);
            
            function pagination(){
                var paginationPos = $(this).index() + 1;
                
                $('.slider li').hide();
                $('.slider li:nth-child('+ paginationPos +')').fadeIn();
                
                $('.pagination li').css({'color': '#858585'});
                $(this).css({'color': '#CD6E2E'});
                
                imgPos = paginationPos;
            }
            
            
            function nextSlider(){
                
                if(imgPos >= $('.slider li').length){
                   imgPos = 1;
                }
                else{
                    imgPos++;
                }
                
                $('.pagination li').css({'color': '#858585'});
                $('.pagination li:nth-child('+ imgPos +')').css({'color': '#CD6E2E'});
                
                $('.slider li').hide();
                $('.slider li:nth-child('+ imgPos +')').fadeIn();
                
            }
            
            function prevSlider(){
                
                if(imgPos <= 1){
                  imgPos = $('.slider li').length;
                }
                else{
                    imgPos--;
                }
                
                $('.pagination li').css({'color': '#858585'});
                $('.pagination li:nth-child('+ imgPos +')').css({'color': '#CD6E2E'});
                
                $('.slider li').hide();
                $('.slider li:nth-child('+ imgPos +')').fadeIn();
                
            }
            
        });

    </script>
</body>

</html>

 

1 odpowiedź

0 głosów
odpowiedź 23 marca przez Tomek Sochacki Mędrzec (186,810 p.)

Dzieje się tak, ponieważ sam zrobiłeś:

setInterval(function(){
  nextSlider();
}, 4000);

no to nextSlider odpala się co 4 sekundy, tak jak tego oczekujesz :)

Timer ten chodzi całkowicie niezależnie od akcji zmieniania się obrazków, po prostu co x milisekund odpala funkcję i tyle. Spróbuj poczytać np. o metodzie setTimeout.

Podobne pytania

+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
3 odpowiedzi 88 wizyt
pytanie zadane 16 maja 2016 w JavaScript, jQuery, AJAX przez niezalogowany
+1 głos
1 odpowiedź 101 wizyt
pytanie zadane 1 maja 2016 w JavaScript, jQuery, AJAX przez jaca121212 Nałogowiec (38,070 p.)
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

65,755 zapytań

112,393 odpowiedzi

237,319 komentarzy

46,700 pasjonatów

Przeglądających: 140
Pasjonatów: 0 Gości: 140

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.

...