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

Question

我很努力地制作了这个排行榜滑块横幅，但未能成功。这是 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;
}

Answer 1

您必须先在滑块内创建所有横幅，使其具有相同的高宽/分辨率

然后你可以给你的滑块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;
}

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

How to make Leaderboard slider banner responsive?

html

javascript

css

banner

web