Slide show CSS

[z.cristiano]

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 effetto in movimento e fa vedere i primi 3 box o gli ultimi 3 box.

<style>

.ps_veditutto_festival_sx {
    background: url('../images/freccia_sx_festival_01.png') center no-repeat;
    background-size: 30px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border: solid 1px #FFFFFF;
    background-color: #9DB0B6;
    border-radius: 10px;
    padding:20px;
    text-align: center;
    transition: 0.2s;
}

.ps_veditutto_festival_sx:link {
    background: url('../images/freccia_sx_festival_01.png') center no-repeat;
    background-size: 30px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border: solid 1px #FFFFFF;
    background-color: #9DB0B6;
    border-radius: 10px;
    padding:20px;
    text-align: center;
}


.ps_veditutto_festival_sx:visited {
    background: url('../images/freccia_sx_festival_01.png') center no-repeat;
    background-size: 30px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border: solid 1px #FFFFFF;
    background-color: #9DB0B6;
    border-radius: 10px;
    padding:20px;
    text-align: center;
}


.ps_veditutto_festival_sx:hover {
    background: url('../images/freccia_sx_festival_02.png') -2px center no-repeat;
    background-size: 30px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border: solid 1px #FFFFFF;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding:20px;
    text-align: center;
}






.ps_veditutto_festival_dx {
    background: url('../images/freccia_dx_festival_01.png') center no-repeat;
    background-size: 30px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border: solid 1px #FFFFFF;
    background-color: #9DB0B6;
    border-radius: 10px;
    padding:20px;
    text-align: center;
    transition: 0.2s;
}

.ps_veditutto_festival_dx:link {
    background: url('../images/freccia_dx_festival_01.png') center no-repeat;
    background-size: 30px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border: solid 1px #FFFFFF;
    background-color: #9DB0B6;
    border-radius: 10px;
    padding:20px;
    text-align: center;
}


.ps_veditutto_festival_dx:visited {
    background: url('../images/freccia_dx_festival_01.png') center no-repeat;
    background-size: 30px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border: solid 1px #FFFFFF;
    background-color: #9DB0B6;
    border-radius: 10px;
    padding:20px;
    text-align: center;
}


.ps_veditutto_festival_dx:hover {
    background: url('../images/freccia_dx_festival_02.png') 29px center no-repeat;
    background-size: 30px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border: solid 1px #FFFFFF;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding:20px;
    text-align: center;
}

</style>

<div style=\"overflow-x:auto; position:relative; scroll-behavior: smooth;\">
            
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="scroll_festival_1">BOX 1</td>
</tr>
<tr>
<td id="scroll_festival_2">BOX 2</td>
</tr>
<tr>
<td id="scroll_festival_3">BOX 3</td>
</tr>
<tr>
<td  id="scroll_festival_4">BOX 4</td>
</tr>
<tr>
<td id="scroll_festival_5">BOX 5</td>
</tr>
<tr>
<td id="scroll_festival_6">BOX 6</td>
</tr>
</table>

</div>

<div style="float: left; width: 60px; height: 60px; margin-left:20px; margin-top:20px;">
<button name="ps_vedi_festival_sx" id="ps_vedi_festival_sx" class="ps_veditutto_festival_sx" onclick="window.location.href='#scroll_festival_1'"></button>
</div>
            
<div style="float: right; width: 60px; height: 60px; margin-right:20px; margin-top:20px;">
<button name="ps_vedi_festival_dx" id="ps_vedi_festival_dx" class="ps_veditutto_festival_dx" onclick="window.location.href='#scroll_festival_6'"></button>
</div>

Funziona però, quando clicco il pulsante destro o sinistro si muove in su o giù la pagina e inoltre, funziona solo su FIREFOX ma CHROME no...

Cosa ho sbagliato?
MI potete dare una mano?

 

[jdigital.it]

Allora come prima cosa ti consiglierei di non utilizzare una tabella ma di utilizzare una gestione differente, magari tramite i div. Inoltre con il codice che hai scritto vai a regolare il movimento ma non hai inserito elementi nascosti.

Il mio consiglio è di gestire il tutto tramite chiamate asincrone. Mi spiego meglio: se devi mostrare più cose all'utente non ha senso nasconderle anche perché avresti una pagina più pesante che però mostra pochi contenuti. L'ideale è richiedere di volta in volta al server ciò di cui hai bisogno ed aggiungerlo a quello che hai già mostrato