javascript - 幻灯片使用文字代替图片的几个问题

Question

所以我使用图像幻灯片来创建文本幻灯片。我在几件事上需要帮助。我还在学习编码，所以有点复杂。

我无法让它响应？？每当我试图让我的窗口变小，或者在移动设备上查看它时，我认为是我的填充使我的 div 宽度非常小并且看起来很糟糕。还有一个水平滚动正在进行，我不确定如何修复它。

此外，当缩小窗口时，我希望我的箭头位于文本下方而不是文本上方。

有人可以帮我解决这个问题吗？我将不胜感激!

这是代码笔:

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 位置。

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