Dodanie autoplay do slidera. Automatyczne przewijanie obrazków.

Hej, Mam taki kawałek slidera, który działa na przyciski:

 

<div class="featured-slider">
     <div class="diy-slideshow">
          <figure class="show">
               <img src="images/palacyk_brama.jpg" width="100%" />
          </figure>
          <figure>
               <img src="images/palacyk_front.jpg" width="100%" />
          </figure>
          <figure>
               <img src="images/palacyk_basen.jpg" width="100%" />
          </figure>
          <figure>
               <img src="images/palacyk_staw.jpg" width="100%" />
          </figure>
          <figure>
               <img src="images/palacyk_garaze.jpg" width="100%" />
          </figure>
          <figure>
               <img src="images/palacyk_widok.jpg" width="100%" />
          </figure>
          <span class="prev">&laquo;</span>
          <span class="next">&raquo;</span>
     </div>  
</div>

I taki kawałek js do tego:

 

<script type="text/javascript">
        (function(){
  
        var counter = 0, // to keep track of current slide
            $items = document.querySelectorAll('.diy-slideshow figure'), // a collection of all of the slides, caching for performance
            numItems = $items.length; // total number of slides

        // this function is what cycles the slides, showing the next or previous slide and hiding all the others
        var showCurrent = function(){
          var itemToShow = Math.abs(counter%numItems);// uses remainder (aka modulo) operator to get the actual index of the element to show  

          // remove .show from whichever element currently has it 
          // http://stackoverflow.com/a/16053538/2006057
          [].forEach.call( $items, function(el){
            el.classList.remove('show');
          });

          // add .show to the one item that's supposed to have it
          $items[itemToShow].classList.add('show');    
        };

        // add click events to prev & next buttons 
        document.querySelector('.next').addEventListener('click', function() {
             counter++;
             showCurrent();
          }, false);

        document.querySelector('.prev').addEventListener('click', function() {
             counter--;
             showCurrent();
          }, false);
            
            
            
        })();  
    </script>

Chciałbym aby   miał te przyciski, ale jak nikt nie klika, to żeby latał z automatu, co 5 sek slajd an przyklad..

Próbowałem symulować jakoś kliknięcie w next, ale działa tylko 1 raz.

 

setTimeout( function() { $( '.next' ).trigger( 'click' ) }, 5000 );

Dla kogoś, kto zna chociaz podstawy js, to pewnie będzie bułka z masłem

I taki kawałek js do tego:

Chciałbym aby   miał te przyciski, ale jak nikt nie klika, to żeby latał z automatu, co 5 sek slajd an przyklad..

Próbowałem symulować jakoś kliknięcie w next, ale działa tylko 1 raz.
 

setTimeout( function() { $( '.next' ).trigger( 'click' ) }, 5000 );

Dla kogoś, kto zna chociaz podstawy js, to pewnie będzie bułka z masłem

 

 

Wszystko działa dokładnie tak jak oprogramowałeś.

Wczytuje się slideshow, przewija slajd po 5 sec i skrypt kończy działanie.

Potrzebujesz stworzyć loopa na timeouta, do czego przyda się setinterval.

 

Wrzuć co masz do funkcji o pokombinuj z wywołaniem:

setInterval(function() {
// slideshow
//trigger('click')
}, 5000);

Nie wiem jak się zachowa w przypadku kliknięcia w next, czy nie będziesz wtedy musiał wyzerować jakoś setinterval.

 

W ostateczności kod zmiany slajdu wrzuć do funkcji i wywołuj go automatem:

function(){
//kod
function zmianaslajdu(){
//kod
//...trigger('click')...
}
var interval = setInterval(zmianaslajdu, 5000);
zmianaslajdu();

trzeba gdzieś jeszcze wcisnąć warunek wywołania czasowego gdy nie kliknięto next/prev, ale jak już zapętlisz automat czasowy warunek nie powinien stanowić już problemu.

 

 

edit: poprawiony robal w wywołaniu f()

Użytkownik Zimistrz edytował ten post 28 lipca 2014 - 09:35

Super, dzięki. Poradziłem sobie. 
Tak jak mówiłeś, pod przyciskami resetowałem interwal i ustawiałem na nowo.

trzeba gdzieś jeszcze wcisnąć warunek wywołania czasowego gdy nie kliknięto next/prev

Hmm, czemu? Ja tę funkcję zmiana slajdu uruchamiam od razu. Po 5 sekundach rusza w pętli. Jeśli ktoś kliknie w międzyczasie next, albo prev, to interval sie resetuje. Jeśli po10 sekundach nic nie klinie, to znowu ruszy.

Mi to odpowiada Także dzięki za pomoc zią

Trochę mętnie ująłem opis warunku, ale chodziło dokładnie o resecik interwału aby nie doszło do sytuacji podwójnej zmiany slajdu.

Rozumiem że poszedłeś w użycie pierwszej koncepcji ?

 

Jeśli nie zbywa, byłoby warto wrzucić ostateczny kod.

Trochę mętnie ująłem opis warunku, ale chodziło dokładnie o resecik interwału aby nie doszło do sytuacji podwójnej zmiany slajdu.

Rozumiem że poszedłeś w użycie pierwszej koncepcji ?

 

Jeśli nie zbywa, byłoby warto wrzucić ostateczny kod.

Pewnie będzie się  do czego doczepić, ale ostateczny wynik mnie satysfakcjonuje:

 

function zmianaslajdu() {
            counter++;
            showCurrent();
         }
            
        function zmianaslajdu2() {
            counter--;
            showCurrent();
         }
        
        interval = setInterval(zmianaslajdu, 5000);
        zmianaslajdu();
            
        // add click events to prev & next buttons 
        document.querySelector('.next').addEventListener('click', function() {
            counter++;
            showCurrent();
            clearInterval(interval);
            interval = setInterval(zmianaslajdu, 5000);
            zmianaslajdu();
          }, false);

        document.querySelector('.prev').addEventListener('click', function() {
            counter--;
            showCurrent();
            clearInterval(interval);
            interval = setInterval(zmianaslajdu2, 5000);
            zmianaslajdu2();
          }, false);