CSS Slideshow senza JS e JQUERY

z.cristiano

Utente Attivo
16 Giu 2007
140
0
16
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...

HTML:
<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>
 
Discussioni simili
Autore Titolo Forum Risposte Data
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1
U [WordPress] [CSS] Come faccio a spostare più in basso lo slider WordPress 0
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
A Strumenti per filtrare il css HTML e CSS 1
S Il Css non si aggiorna, svuotata cache HTML e CSS 6
N [css] :active HTML e CSS 1
Shyson [WordPress] [CSS] Formattare casella WordPress 0
Shyson [CSS] Titolo del sito cambia dimensione HTML e CSS 2
A icone css in selectmenu jQuery 2
M Problematica CSS (tag html,body) HTML e CSS 4
W [C#] Il componente "WebBrowser" non mi esegue css e javascript .NET Framework 0
W inclusioni css in eccesso, cosa fare? HTML e CSS 1
M [WordPress] Modifiche CSS su lightbox WordPress 2
T countdown da sistemare con i CSS... HTML e CSS 4
Y Finestra dialogo CSS Modal HTML e CSS 6
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
D How to learn HTML and CSS? HTML e CSS 2
M CSS posizionamento stile HTML e CSS 2
I [HTML/CSS] Consigli sul mio primo sito HTML e CSS 9
V Galleria con CSS e Javascript Javascript 2
C CSS pagina a schermo intero HTML e CSS 3
V Menù CSS da file in cartella esterna HTML e CSS 4
Koboshi Cambiare il css di una pagina con tasto "on off" HTML e CSS 5
V [WordPress] Come modificare link in tasto menu css WordPress 21
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
I [CSS] Galleria immagini non funziona HTML e CSS 12
M [css][php] codice php esterno non vede il css PHP 6
J XML e css XML 0
L Navbar dropdown con Bootstrap: link ai css CMS (Content Management System) 4
paloppa Bootstrap.min.css modificare il file HTML e CSS 6
C 3 Bug CSS AND HTML: Overlay-Banner-Menu HTML e CSS 0
C 3 BUG CSS AND HTML: OVERLAY - BANNER- MENU HTML e CSS 0

Discussioni simili