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

我非常努力地制作此排行榜滑块横幅，但未能成功。
这是Banner Test Page（第二滑标）。

当我不使用此滑块时，我的网页将完全响应。您可以在这里查看我的Original Page

请帮助我使横幅广告测试页具有自适应性。

谢谢您的帮助。

.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;
}

最佳答案

首先，您必须在滑块内创建横幅广告，使其高度/宽度/分辨率相同

然后，您可以将max-width:100%;和height: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;
}

关于javascript - 如何使排行榜滑块横幅响应？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59907083/