[HTML] Creare un DIV con slideshow

Discussione in 'HTML e CSS' iniziata da Andrea_Ventura, 13 Giugno 2018.

Tag (etichette):
  1. Andrea_Ventura

    Andrea_Ventura Nuovo Utente

    Registrato:
    10 Giugno 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Salve sono alle prese con il mio primo sito.
    Vorrei creare un div nel quale effettuare uno slideshow con del testo (non necessita il cambio sfondo di immagini, se non un'immagine fissa come sfondo),
    Ho visto in rete e ho trovato diversi modi di costruire tale oggetto, voi quale metodo mi consigliereste di seguire?
     
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.323
    Mi Piace Ricevuti:
    253
    Punteggio:
    83
    Sesso:
    Maschio
    Dicci quali hai visto altrimenti come facciamo a consigliarti!
     
  3. Andrea_Ventura

    Andrea_Ventura Nuovo Utente

    Registrato:
    10 Giugno 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
  4. Andrea_Ventura

    Andrea_Ventura Nuovo Utente

    Registrato:
    10 Giugno 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Principalmente riscontro due problemi: (anche se potrebbero essercene degli altri)
    1) se imposto il colore di sfondo e dei bordi per il div contenitore esso non mantiene questi per i div contenuti in esso, ma bensì copre solo una riga. Ovvero non riconosce che i div interni si estendano e non li copre.
    Per far un codice più decente volevo mettere l'immagine di sfondo (che inizialmente è solo un colore per mantenere il sito leggero) e applicare un bordo, ma ottengo un risultato decente solo se applico sfondo e bordo al div textint. non capisco perchè. forse sbaglio con l'attributo "position"

    2) nonostante la dichiarazione dei bottoni (dot) essi non appaiono sul browser e quando ne appare uno è mal posizionato (io vorrei collocarlo all interno del div contenitore, ma a 5px di distanza dal div textint.

    Se qualcuno fosse così gentile da dirmi dove sbaglio sarebbe di grande aiuto.
    Vi ringrazio in anticipo! :)

    Codice:
        <head>
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
            <title>Test Slideshow</title>
            <link rel="stylesheet" href="../Say Something/css/prova_slide.css" type="text/css" />
    
        </head>
      
        <body>
             <!-- Slideshow container -->
            <div id="slideshow-container">
          
                <!-- Caption text -->
                <div class="mySlides">
                    <div class="text">
                        <div class="title"><h2>Title</h2></div>
                         <div class="textint"><p>Chaption</p></div>
                        <div class="author"><h2>Author</h2></div>
                    </div>
                </div>
          
                <div class="mySlides">
                    <div class="text">Caption Two</div>
                </div>
          
                <div class="mySlides">
                    <div class="text">Caption Three</div>
                </div>
              
                <!-- prev & next buttons -->
                <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                <a class="next" onclick="plusSlides(1)">&#10095;</a>
              
                <!-- dots -->
                <div style="text-align:center">
                    <span class="dot" onclick="currentSlide(1)"></span>
                    <span class="dot" onclick="currentSlide(2)"></span>
                    <span class="dot" onclick="currentSlide(3)"></span>
                </div>
              
            </div>
                <br>
          
          
          
          
            <div id="slidescript">
                <script type= text/javascript>
                    var slideIndex = 1;
                    showSlides(slideIndex);
                  
                    // Next/previous controls
                    function plusSlides(n) {
                      showSlides(slideIndex += n);
                    }
                  
                    // Thumbnail image controls
                    function currentSlide(n) {
                      showSlides(slideIndex = n);
                    }
                  
                    function showSlides(n) {
                      var i;
                      var slides = document.getElementsByClassName("mySlides");
                      var dots = document.getElementsByClassName("dot");
                      if (n > slides.length) {slideIndex = 1}
                      if (n < 1) {slideIndex = slides.length}
                      for (i = 0; i < slides.length; i++) {
                          slides[i].style.display = "none";
                      }
                      for (i = 0; i < dots.length; i++) {
                          dots[i].className = dots[i].className.replace(" active", "");
                      }
                      slides[slideIndex-1].style.display = "block";
                      dots[slideIndex-1].className += " active";
                    }
                </script>
            </div>
        </body>
      
    </html>
     <!-- e questo il codice css:
     
     #slideshow-container {
        position:relative;
        top:150px;
        left:25%;
        width:50%;
        height:auto;
      
                                                    /*non capisco perchè il div contenitore non mantenga l'altezza automatica dei suoi contenuti
                                                    background-color:darksalmon;
                                                    border: 3px solid #73AD21;
                                                    */
                                                  
      
    }
    
    /* Hide the images by default */
    
    /* Caption text */
    .text {
      
        color: #f2f2f2;
        font-size: 15px;
        padding: 5% 5% 5% 5%;
        position: absolute;
        left:5%; right: 5%;
        height:auto;
        text-align: center;
      
        background-color:darksalmon;
        border: 3px solid #73AD21;
    
    }
    
    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 10px;
      margin-top: -22px;
      color: navy;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
    }
    
    /* Position the "prev & next button" to the left and right */
    .prev {
      left: 0;
      border-radius: 3px 0 0 3px;
    }
    .next {
        right: 0;
        border-radius: 0 3px 3px 0;
      
    }
    
    /* On hover, add a navy background color with a little bit see-through */
    .prev:hover, .next:hover {
      background-color: rgba(0,0,128,0.8);
    }
    
    /* The dots/bullets/indicators */
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .active, .dot:hover {
      background-color: #717171;
    }
    
    
    
    /* Fading animation
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
    }*/
    
    @-webkit-keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }
    
    @keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }
    
    -->
     
    Ultima modifica: 13 Giugno 2018
  5. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.323
    Mi Piace Ricevuti:
    253
    Punteggio:
    83
    Sesso:
    Maschio
    Per slideshow si intende una presentazione di immagini non di testo!
    Tu cosa vuoi che passi temporizzato dei blocchi di testo o vuoi un testo scorrevole?
     
  6. Andrea_Ventura

    Andrea_Ventura Nuovo Utente

    Registrato:
    10 Giugno 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Mi piacerebbe ottenere un div (che poi si trasformerà in un'immagine di una pergamena vettoriale) nel quale compare del testo.
    Lo scorrimento automatico non è propriamente perfetto per l'obbiettivo che voglio ottenere, poichè ogni testo può occupare più o meno tempo per essere letto.
    Inizialmente per browser per pc desktop, ma quando lo trasformerò in mobile-friendly ci vorrebbe lo scorrimento touch.
    Non so se sono stato chiaro...
     
Sto caricando...

Condividi questa Pagina