[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.449
338
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.449
338
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...
 
Discussioni simili
Autore Titolo Forum Risposte Data
F Creare elementi html con javascript Javascript 3
A [HTML] Creare sito web per eLearnig HTML e CSS 2
max_400 [HTML] Come creare un jpg animata (non gif animata) HTML e CSS 3
T con oop creare un ciclo per una pagina dinamica html con php PHP 3
S [PHP] [HTML] Come creare un grafico dinamico PHP 4
A [HTML] E' possibile creare un tema per wordpress con dreamweaver?? HTML e CSS 1
S [Javascript] [HTML] creare stringhe di riferimento da riutilizzare Javascript 5
F Creare un contatore numerico in HTML HTML e CSS 9
Selenio89 [HTML] creare menu di navigazione HTML e CSS 2
Sermatth72 [HTML] creare link con colori Hover diversi, possibile? HTML e CSS 6
S Creare un foglio di calcolo in html collegandolo a un e-commerce HTML e CSS 7
D [HTML] come Creare questo pulsante a 3 strisce? HTML e CSS 2
Monz94 [Javascript] [HTML] Creare Checkbox o Radio con Immagini Javascript 0
Matteol92 [HTML] Creare social box senza sovrapposizione HTML e CSS 5
atipika creare codice html da immagine HTML e CSS 1
D [Javascript] Come creare un equalizzatore HTML collegato a files audio Javascript 1
R [PHP] [HTML] Creare script invio modulo contatti PHP 2
M [Javasript + HTML] come creare textbox in tr specifica Javascript 0
V creare un collegamento di pagina html in php PHP 10
asevenx [HTML] Creare mappa interattiva con Illustrator HTML e CSS 5
helpdesk creare una pagina html dimanicamente con php PHP 12
C File html con procedure javascript per creare effetto libro da sfogliare Javascript 9
C Javascript completo di html per creare una tabella dove compare il saluto in base all'ora. Javascript 2
R Creare pagina HTML da script PHP PHP 2
S creare sito web html css HTML e CSS 5
J Creare file html da un form in area riservata PHP 9
K creare pagine html con parti in comune [era:Consiglio tecnico] HTML e CSS 3
G in flash è possibile creare una finestra che visualizza una pagina html? Flash 0
P guida di dreamweaver per creare codice html pulito Webdesign e Grafica 1
G AIUTO! Vorrei creare un guestbook nel mio sito html.. come faccio? HTML e CSS 2
Z Software Per Creare Html Con Thumbnails HTML e CSS 10
L creare o modificare una .GIF da mettere su una pagina HtmL HTML e CSS 5
G Pagina html in stringa PHP 2
E Sostituzione Elemento Html PHP 3
G Elementi HTML HTML e CSS 1
K Visualizzare del html responsive in una Webview Sviluppo app per Android 0
T Domanda valutazione html LinkedIn 2022 pt3 HTML e CSS 7
T Domanda valutazione html LinkedIn 2023 pt2 HTML e CSS 15
T Domanda valutazione html LinkedIn 2023 pt1 HTML e CSS 1
MarcoGrazia Salvataggio HTML in database PHP 2
K posizionare variabile da pagina html all'iframe. Javascript 1
peppe0703 Come Estrarre dati da db wordpress e richiamarli in html esterno HTML e CSS 0
L problema collegamento file css con html HTML e CSS 1
D Informazioni da XAMPP su HTML PHP 0
R Immagini html HTML e CSS 2
K File audio in html, chi mi può aiutare? HTML e CSS 0
K Aiuto con file audio in html HTML e CSS 1
Antonio67 Lanciare file shell bash da html HTML e CSS 2
M Riportare in tabella HTML dati estratti con query SQL MySQL 0
G Codice html Javascript 1

Discussioni simili