Visualizzazione dei risultati da 1 a 2 su 2

Discussione: Slideshow

  1. #1

    Slideshow

    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.

    codice 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?
    Ultima modifica di z.cristiano; 05-11-2021 a 21:19

  2. #2
    Utente di HTML.it L'avatar di linoma
    Registrato dal
    Mar 2010
    Messaggi
    1,324
    Ad occhio sembre che il click faccia muovere proprio la pagina. Lo devi gestire meglio cn JavaScript. Poi userei i tags ul li. Il tag table probabilmente andrà in disuso
    Per gli Spartani e Sparta usa spartan Il mio github

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.