使用文字而不是圖像的幻燈片的幾個問題

Question

所以我用圖像幻燈片來創建文字幻燈片。我需要幫助幾件事情。我仍然在學習編碼，所以它有點複雜。

我無法使其響應？無論何時我試圖讓自己的窗口變小，或者在移動設備上查看它，我都認爲是我的填充使得我的div寬度非常小，而且看起來很糟糕。還有一個水平滾動正在進行，我不知道如何解決它。

此外，當使窗口變小時，我希望我的箭頭能夠在文本下面，而不是在文本上。

有人可以幫助我嗎？我會非常感謝！

這裏的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

我看到的是與導航箭頭唯一的問題...
所以我唯一改變的事情是left並且這些絕對定位的箭頭的位置爲right。

分叉CodePen在整頁模式下。

.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%) 
}