Javascript 使用文本而不是图像进行幻灯片放映的几个问题

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

我无法使其响应？？每当我试着缩小我的窗口，或者用手机看它的时候，我想是我的填充物让我的div宽度变小了，看起来很糟糕。还有一个水平滚动正在进行，我不知道如何修复它

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

有人能帮我吗？我真的很感激

这是密码笔：

var slideIndex=1；showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
如果（n>x.length）{slideIndex=1}；
如果（n<1）{slideIndex=x.length}
对于（i=0；i

.w3内容{
最大宽度：750px；
保证金：自动；
最小高度：自动；
}
.w3中心{
文本对齐：居中！重要
}
.w3显示容器{
职位：相对
}
.w3黑色{
颜色：#fff！重要；
背景色：#000！重要
}
.w3显示左侧{
位置：绝对位置；
最高：50%；
左：0%；
转换：翻译（-100%，-50%）；
-ms转换：转换（-0%，-50%）
}
.w3显示右侧{
位置：绝对位置；
最高：50%；
右：0%；
转换：翻译（100%，-50%）；
-ms转换：翻译（0%，-50%）
}
.w3按钮{
空白：正常；
边界：无；
显示：内联块；
大纲：0；
填充：8px 16px；
垂直对齐：中间对齐；
溢出：隐藏；
文字装饰：无；
颜色：继承；
背景色：继承；
文本对齐：居中；
光标：指针；
空白：nowrap
}
.w3按钮：悬停{
颜色：#000！重要；
背景色：#ccc！重要；
}
迈斯利德斯先生{
文本对齐：对齐；
填充：0px 40px；
文本缩进：50px；
}
.w3内容{
文本缩进：50px；
字体系列：droid衬线；
}

标题

字幕


“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”
除了偶尔因不谨慎而被拘留外，还必须因职权上的过失而受到惩罚。”

“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”
除了偶尔因不谨慎而被拘留外，还必须因职权上的过失而受到惩罚。”
“除了偶尔因疏忽而死亡外，其他人都应该为软体动物的劳动承担责任。”Lorem ipsum dolor sit amet，一位杰出的告别者，他说。但是，在最低限度上，我们需要一个实验室来进行日常工作。二人世界
这是一种令人厌恶的行为，因为它是一种不平等的行为。除了偶尔不轻率的行为外，还必须为自己的行为负责。”
呜呜呜呜333
❮
❯

我看到的唯一问题是导航箭头…
所以我唯一改变的是这些绝对定位箭头的

左

和

右

位置

在整版模式下分叉

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