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.
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?
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.
HTML:
<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?