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

幻灯片使用文本而不是图像的几个问题

1 个答案: