[HTML] Creare un DIV con slideshow

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
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?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.081
299
83
Dicci quali hai visto altrimenti come facciamo a consigliarti!
 

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
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:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.081
299
83
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?
 

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
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...