CSS Slideshow senza JS e JQUERY

z.cristiano

Utente Attivo
16 Giu 2007
145
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>
 

jdigital.it

Nuovo Utente
28 Ott 2021
10
0
1
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

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


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...
 

Allegati

  • Schermata 2021-11-06 alle 21.18.48.png
    Schermata 2021-11-06 alle 21.18.48.png
    152,9 KB · Visite: 117
Discussioni simili
Autore Titolo Forum Risposte Data
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
G Input checkbox in CSS HTML e CSS 0
G classe CSS sovrascritta HTML e CSS 2
G file CSS contenente variabili HTML e CSS 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
L problema collegamento file css con html HTML e CSS 1
M CSS "puro" HTML e CSS 0
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
Z Google Fonts CSS tra desktop e responsive HTML e CSS 1
Z Slide show CSS HTML e CSS 1
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

Discussioni simili