CSS Slideshow senza JS e JQUERY

[z.cristiano]

Buongiorno,
ho trovato su GOOGLE questo fantastico script CSS che permette di fare SLIDESHOW molto veloce ma un dubbio che non riesco a risolvere...

Sotto trovi il codice HTML e CSS e funziona benissimo però se mettessi 10 JPG non me lo fa fare e si mischia, sotto vedo che si possono vedere solo 3 immagini, ma se volessi mettere 10 o tanti immagini, c'è qualcosa che va impostato?
Magari devono essere illimitati e non per forza solo 3...

<style>



.slider-container {

width: 800px;

height: 400px;

background-color: yellow;

margin-left: auto;

margin-right: auto;

margin-top: 0px;

text-align: center;

overflow: hidden;

}



.image-container {

width: 2400px;

background-color: red;

height: 400px;

clear: both;

position: relative;

-webkit-transition: left 2s;

-moz-transition: left 2s;

-o-transition: left 2s;

transition: left 2s;

}



#slider-image-1:target ~ .image-container

{

left: 0px;

}



#slider-image-2:target ~ .image-container

{

left: -800px;

}



#slider-image-3:target ~ .image-container

{

left: -1600px;

}



.button-container {

position: relative;

top: -20px;

}



.slider-change

{

display: inline-block;

height: 10px;

width: 10px;

border-radius: 5px;

background-color: brown;

}



</style>



<div class="slider-container">

<span id="slider-image-1"></span>

<span id="slider-image-2"></span>

<span id="slider-image-3"></span>

<div class="image-container">

<img src="1.jpg" class="slider-image" />

<img src="2.jpg" class="slider-image" />

<img src="3.jpg" class="slider-image" />

</div>

<div class="button-container">

<a href="#slider-image-1" class="slider-change"></a>

<a href="#slider-image-2" class="slider-change"></a>

<a href="#slider-image-3" class="slider-change"></a>

</div>

</div>

 

[jdigital.it]

Ciao, questo snippett di codice è chiaramente impostato per gestire solo 3 immagini, andrebbero aggiunti gli attributi css per gestire ulteriori immagini ed i relativi tag a per permettere la selezione delle immagini aggiuntive.

Se ne hai ancora bisogno fammi sapere, ti scrivo come fare, ora sono da smartphone e non riesco

Inviato dal mio IN2023 utilizzando Tapatalk

 

[z.cristiano]

Ciao, questo snippett di codice è chiaramente impostato per gestire solo 3 immagini, andrebbero aggiunti gli attributi css per gestire ulteriori immagini ed i relativi tag a per permettere la selezione delle immagini aggiuntive.

Se ne hai ancora bisogno fammi sapere, ti scrivo come fare, ora sono da smartphone e non riesco

Inviato dal mio IN2023 utilizzando Tapatalk

Buonasera, grazie del tuo consiglio ma posso chiederle un grandissimo favore? Mi puoi aiutare per una piccolissima cosa che non sono riuscito a trovare…..intanto ti spiego cosa mi serve, sei presente il sito di AMAZON (versione desktop)? In basso dove c’è la scritta ESPLORA PIÙ ARTICOLI e vorrei fare come questo ma non si trova il codice anzi si trova ma con stili già fatti e javascript e non posso modificare collegando ai stili che ho fatto…..cioè vedi in allegato? Ho fatto io e mi piacerebbe che quei 2 pulsanti funzionassero nel scrollare il primo box ultimo box.....io ho fatto un codice e vede qui

Slide show CSS

BUonasera, ho una difficoltà nel come codificare il CSS per lo slideshow che cliccando il pulsante destro o sinistra scorre... Sotto c'è il codice che praticamente è un div con dentro 3 box visibili e altri 3 box nascosti quindi sono in totale 6 box e quando clicco il pulsante scorre con...

forum.mrw.it

FUnziona ma solo su FIREFOX, CHROME no, inoltre quando clicco la freccia sinistra o destra si sposta un pò su fino al top di quei box

MI puoi aiutare solo questo?

Non trovo uno codice decente sul motore di ricerca anzi le trovo tanti ma preimpostati e non posso modificare il nome dei pulsanti da quelli fatti loro ai pulsanti che ho fatto io...