Slider και αυτόματα εναλλαγή κάθε 5000 ms - codepen

[philos]

Καλησπέρα!

Βρήκα αυτόν τον slider που προσάρμοσα στις ανάγκες μου. Από ότι βλέπω είναι καθαρό CSS.

Θέλω να προσθέσω λειτουργία όπου αλλάζει αυτόματα slide κάθε 5000 milliseconds. Καμιά ιδέα;

[XPHSTOS_]

Ενδιαφέρον τεχνική!

Αλλά για να προσθέσεις μια τέτοια λειτουργία θα χρειαστείς JavaScript.
Πάντως σαν markup είναι hacky!  
Αν μιλάμε για production mode θα πήγαινα εξ αρχής σε κάτι πιο feature rich!  

[gsarig]

Αν και έχει ενδιαφέρον ως πείραμα, σε πραγματικές συνθήκες δεν είναι καθόλου πρακτικό. Το βασικό πρόβλημα είναι το πώς θα το κάνεις να επαναλαμβάνεται κάθε Χ δευτερόλεπτα. Η μόνη καθαρά CSS λύση που θα μπορούσα να σκεφτώ είναι με keyframe animations, όπου ορίζεις animation-iteration-count: infinite και παίζεις με τους χρόνους. Για παράδειγμα δες κάτι πρόχειρο.

Εκτός όμως του ότι είναι μπελάς να υπολογίσεις σωστά τα frames σου, το slideshow δεν θα μπορεί να δεχτεί δυναμικό αριθμό καταχωρήσεων, αφού κάθε μία θα πρέπει να έχει το δικό της animation.

Εννοείται πως για παραγωγική χρήση θα πρότεινα να το αποφύγεις.

[k33theod]

Αν θες js

let buttons = document.querySelectorAll("input[name=radio-btn]");
let i = 0;
function roll ()
{
    if (i==5)
    {
       i = 0;
       buttons[i].checked='1';
    }
    else
        buttons[i++].checked='1';
   
}  //buttonsa = list(buttonsa);
setInterval (roll,5000);

Αν και πιστεύω ο κώδικας είναι χάλια. 

To παρακάτω html για παράδειγμα είναι αρκετό. Όλα τα άλλα js, css.

<div id = "slider">
  <div class="arrow left" >‹</div>
  <div class="arrow right">›</div>
  <img id= 'roll_img' src="" />
</div>