Mehrere Probleme mit der Diashow mit Text anstelle von Bildern

Question

Also habe ich eine Bild-Diashow verwendet, um eine Text-Diashow zu erstellen. Ich brauche Hilfe bei mehreren Dingen. Ich lerne immer noch Codierung, also war es ein wenig kompliziert.

Ich bin nicht in der Lage, es reagieren zu lassen ?? Immer wenn ich versuche, mein Fenster kleiner zu machen, oder in das Handy hineinzuschauen, denke ich, dass meine Polsterung meine divs Breite wirklich klein macht und es schlecht aussieht. Es gibt auch ein horizontales Scrollen und ich bin mir nicht sicher, wie ich es beheben kann.

Wenn ich das Fenster verkleinere, möchte ich auch, dass meine Pfeile unter den Text und nicht über den Text gehen.

Kann mir jemand dabei helfen? Ich wäre wirklich dankbar!

Hier ist der codepen:

http://codepen.io/tsalgadoromero/pen/jBgqmY

var slideIndex = 1;showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    if (n > x.length) {slideIndex = 1} ; 
 
    if (n < 1) {slideIndex = x.length} 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
}

.w3-content { 
 
    max-width: 750px; 
 
    margin: auto; 
 
    min-height: auto; 
 
} 
 

 
.w3-center { 
 
    text-align: center!important 
 
} 
 

 
.w3-display-container { 
 
    position: relative 
 
} 
 

 
.w3-black { 
 
    color: #fff!important; 
 
    background-color: #000!important 
 
} 
 

 
.w3-display-left { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0%; 
 
    transform: translate(-100%, -50%); 
 
    -ms-transform: translate(-0%, -50%) 
 
} 
 

 
.w3-display-right { 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 0%; 
 
    transform: translate(100%, -50%); 
 
    -ms-transform: translate(0%, -50%) 
 
} 
 

 
.w3-button { 
 
    white-space: normal; 
 
    border: none; 
 
    display: inline-block; 
 
    outline: 0; 
 
    padding: 8px 16px; 
 
    vertical-align: middle; 
 
    overflow: hidden; 
 
    text-decoration: none; 
 
    color: inherit; 
 
    background-color: inherit; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    white-space: nowrap 
 
} 
 

 
.w3-button:hover { 
 
    color: #000!important; 
 
    background-color: #ccc!important; 
 
} 
 

 
.mySlides { 
 
    text-align: justify; 
 
    padding: 0px 40px; 
 
    text-indent: 50px; 
 
} 
 

 
.w3-content { 
 
    text-indent: 50px; 
 
    font-family: droid serif; 
 
}

<h1 class="w3-center">Title </h1> 
 
<div class="w3-content w3-display-container"> 
 
    <p> 
 

 
    <div class="mySlides"> 
 

 
     <i style="font-family: open sans; font-size: 18px; letter-spacing: 1.5px; display: block; text-indent: 0px; text-align: center;"> Subtitle </i><br> 
 
     <p> 
 
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 

 
     <p> 
 
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
 

 

 
    <!------ Section 2 ------> 
 

 
    <div class="mySlides"> " In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
 

 

 
    </div> 
 
    <div class="mySlides">bleh bleh333</div> 
 

 
    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button> 
 
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button> 
 
</div> 
 
</div>

Answer 1

Das einzige Problem, das ich mit den Navigationspfeile ... sah, war
Das einzige, was ich verändert hat, ist die left und right Position dieser absolut positionierten Pfeile.

Der gegabelte CodePen im Ganzseitenmodus.

.w3-display-left { 
    position: absolute; 
    top: 50%; 
    left: calc(16px + 1em);   /* button padding 1 one character */ 
    transform: translate(-100%, -50%); 
    -ms-transform: translate(-0%, -50%) 
} 

.w3-display-right { 
    position: absolute; 
    top: 50%; 
    right: calc(16px + 1em);   /* button padding 1 one character */ 
    transform: translate(100%, -50%); 
    -ms-transform: translate(0%, -50%) 
}