Javascript 如何使排行榜滑块横幅响应？

我非常努力地制作这个排行榜滑动横幅，但没有成功。 这是（第二个滑动横幅）

当我不使用此滑块时，我的网页完全响应。你可以在这里查我的名字

请帮助我使我的横幅测试页面响应

谢谢你的帮助

.sliderWrapper
{
box-shadow: 0 0 40px 10px #000;
height: 90px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 728px;
}
.sliderWrapper .slider
{
background: #aaa;
overflow: hidden;
height: 100%;
position: relative;
width: 100%;
}
.sliderWrapper .slider .slide
{
display: none;
height: 100%;
position: absolute;
width: 100%;
}
.sliderWrapper .slider .slide img { width: 100%; height: 100%; }
.sliderWrapper .slider-directions .slider-directions-prev,
.sliderWrapper .slider-directions .slider-directions-next
{
cursor: pointer;
background: #eee;
color: #333;
height: 48px;
position: absolute;
top: 35%;
width: 24px;
z-index: 10;
box-shadow: 0;
transition-property: left,right,box-shadow;
transition-duration: 0.5s;
transition-timing-function: ease;
}
.sliderWrapper .slider-directions .slider-directions-prev:after,
.sliderWrapper .slider-directions .slider-directions-next:after
{
content: 'O';
display: block;
line-height: 48px;
}
.sliderWrapper .slider-directions .slider-directions-prev { left: -24px; }
.sliderWrapper:hover .slider-directions .slider-directions-prev { left: 0; box-shadow: 0 0 8px 0 rgba(0,0,0,0.8); }
.sliderWrapper .slider-directions .slider-directions-prev:after { content: '«'; }
.sliderWrapper .slider-directions .slider-directions-next { right: -24px; }
.sliderWrapper:hover .slider-directions .slider-directions-next { right: 0; box-shadow: 0 0 8px 0 rgba(0,0,0,0.8); }
.sliderWrapper .slider-directions .slider-directions-next:after { content: '»'; }
.sliderWrapper .slider-navigation
{
bottom: -24px;
color: #333;
left: 2px;
position: absolute;
z-index: 10;
transition-property: bottom;
transition-duration: 0.5s;
transition-timing-function: ease;
}
.sliderWrapper:hover .slider-navigation { bottom: 2px; }
.sliderWrapper .slider-navigation .slider-navigation-item
{
cursor: pointer;
background: #eee;
border-radius: 100%;
box-shadow: 0;
display: inline-block;
float: left;
height: 12px;
margin-left: 2px;
margin-right: 2px;
text-indent: -9999px;
width: 12px;
transition-property: box-shadow;
transition-duration: 0.5s;
transition-timing-function: ease;
}
.sliderWrapper:hover .slider-navigation .slider-navigation-item {
box-shadow: 0 0 8px 0 rgba(0,0,0,0.8);
}
.sliderWrapper .slider-navigation .slider-navigation-item.active {
background: #333;
color: #eee;
}

---

您必须首先在滑块内创建所有与高度、宽度/分辨率相同的横幅

然后您可以给出

最大宽度：100%和
高度：90px
到滑块

这将使它与你网站的第一条横幅一样具有响应性

CSS中需要的更改

.sliderWrapper {
    box-shadow: 0 0 40px 10px #000;
    height: 90px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 728px;
    max-width: 100%;
}

在小屏幕设备上尝试这些媒体查询，了解您的身高问题

@media only screen and (max-width: 325px) {
  .sliderWrapper {
    height:35px;
  }
}
@media only screen and (min-width: 326px)  and (max-width: 375px) {
  .sliderWrapper {
    height:45px;
  }
}
@media only screen and (min-width: 376px) and (max-width: 425px) {
  .sliderWrapper {
    height:50px;
  }
}
@media only screen and (min-width: 426px) and (max-width: 540px) {
  .sliderWrapper {
    height:65px;
  }
}
@media only screen and (min-width: 540px) {
  .sliderWrapper {
    height:90px;
  }
}

请记住，为了在横幅中获得最佳图像效果，您必须使所有横幅具有相同的高度和宽度

对于最新编辑，请进行以下更改

.sliderWrapper .slider .slide img{
width:100%;
height:auto;
position:absolute:
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

.sliderWrapper .slider{
background:#f9f9f9;
}

评论不用于扩展讨论；这段对话已经结束。