Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    CSS Slideshow senza JS e JQUERY

    Buongiorno,
    ho trovato su GOOGLE questo fantastico script CSS che permette di fare SLIDESHOW molto veloce ma un dubbio che non riesco a risolvere...

    Sotto trovi il codice HTML e CSS e funziona benissimo però se mettessi 10 JPG non me lo fa fare e si mischia, sotto vedo che si possono vedere solo 3 immagini, ma se volessi mettere 10 o tanti immagini non funziona e c'è qualcosa che va impostato?

    Magari devono essere illimitati e non per forza solo 3...

    codice:
    <style>
    
    .slider-container {
    width: 800px;
    height: 400px;
    background-color: yellow;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    text-align: center;
    overflow: hidden;
    }
    
    .image-container {
    width: 2400px;
    background-color: red;
    height: 400px;
    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: -800px;
    }
    
    #slider-image-3:target ~ .image-container
    {
    left: -1600px;
    }
    
    .button-container {
    position: relative;
    top: -20px;
    }
    
    .slider-change
    {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background-color: brown;
    }
    
    </style>
    
    <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="1.jpg" class="slider-image" />
    <img src="2.jpg" class="slider-image" />
    <img src="3.jpg" class="slider-image" />
    </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>

  2. #2
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,164
    leggendolo con un po' di attenzione si capisce abbastanza facilmente la logica dello script.

    fai vedere cosa faresti aggiungendo una sola immagine, così possiamo capire gli errori

  3. #3
    codice:
    .slider-container{width:800px;}
    .image-container{ width:2400; }
    Il problema è in questa parte del codice, .slider-container da la dimensione del box dove si trova l'immagine in questo caso 800px e .image-container invece è di 2400px, se volessi mettere 10 immagini dovresti modificare quest'ultimo parametro moltiplicando per il numero delle foto la larghezza del box.

    Se volessi caricare 5 foto devi modificare il codice 800x5=4000
    quindi il codice va modificato:

    codice:
    .slider-container{width:800px;}
    .image-container{ width:4000; }

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