Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Problema SlideShow

  1. #1

    Problema SlideShow

    Ciao a tutti ragazzi e ragazze,

    Sono nuovo del Forum ed un neofita del linguaggio HTML/CSS, mi sono iscritto perchè seguo sempre i tutorial di HTML.

    Questa volta ho provato a creare uno slideshow per una mia landing page ma ci son degli errori, non scorre le immagini e non fa vedere neanche i pulsanti per cambiare immagine.

    Di seguito vi metto i codici CSS ed HTML che ho usato:

    Codice style.css
    codice:
    .slider-container{
        width: 900px;
        height: 300px;
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        text-align: center;
        overflow: hidden;
    }
    
    
    
    
    .image-container
    {
        width: 2700px;
        background-color: white;
        height: 300px;
        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: -900px;
    
    
    }
    #slider-image-3:target ~ .image-container
    {
       left: -1800px;
    
    
    }
    
    
    
    
    .button-container
    {
    	position: relative;
    	top: -20px;
            
    }
    
    
    .slider-change
    {
    	display: inline-block;
    	height: 5px;
    	width: 20px;
    	border: 1px solid black;
    	background-color: #31a50e;
    }
    Codice HTML del sito

    codice HTML:
    <head>
    <title>slider-recensioni-erbemoni</title>    <link href="style.css" type="text/css" rel="stylesheet" />  </head>
    
    <body>
    <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="images/recensione-strawberry-cannabis-light-erbemoni.JPG"
                                                  class="slider-image" alt="recensione-strawberry-cannabis-light-erbemoni"
                                                  align="left" /> <img src="images/recensione-cannatonic-cannabis-light-erbemoni.JPG"
                                                  class="slider-image" alt="recensione-cannatonic-cannabis-light-erbemoni"
                                                  align="left" /> <img src="images/recensione-boston-george-cannabis-light-erbemoni.JPG"
                                                  class="slider-image" alt="recensione-boston-george-cannabis-light-erbemoni"
                                                  align="left" /> </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>
    </body>
    Questi sono i codici, ho provato dieci mila tentativi ma continuo a bloccarmi, il risultato che mi esce potete vederlo qui: http://erbalegalevarese.site/

    Il tutorial che ho usato è questo: https://www.html.it/articoli/creare-...-css-tutorial/

    Ringrazio in anticipo chiunque riesca ad aiutarmi

  2. #2
    Qualcuno ragazzi?

  3. #3
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,799
    per non fare confusione.. puoi creare una pagina di prova e linkarla?

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,752
    Ciao e benvenuto sul forum.
    il risultato che mi esce potete vederlo qui
    Scusami ma esattamente in che punto di quella pagina dobbiamo guardare?


    EDIT: ho visto ora che vincent mi ha anticipato, puoi seguire le sue indicazione
    Ultima modifica di KillerWorm; 28-07-2020 a 00:38
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

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 © 2020 vBulletin Solutions, Inc. All rights reserved.