Slideshow

[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?