• 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
64 wizyt
pytanie zadane 23 marca w JavaScript, jQuery, AJAX przez Majki Obywatel (1,310 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 (175,780 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ź 147 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ź 99 wizyt
pytanie zadane 1 maja 2016 w JavaScript, jQuery, AJAX przez jaca121212 Nałogowiec (38,070 p.)
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

63,266 zapytań

109,521 odpowiedzi

228,794 komentarzy

43,515 pasjonatów

Przeglądających: 171
Pasjonatów: 4 Gości: 167

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.

...