Как сделать баннер слайдера Leaderboard отзывчивым?

Question

Я очень старался сделать этот баннер-слайдер таблицы лидеров, но не смог. Это тестовая страница Banner (Второй скользящий баннер).

Когда я использую этот слайдер, моя веб-страница полностью отзывчива. Вы можете проверить здесь мою оригинальную страницу

Пожалуйста, помогите мне сделать мою тестовую страницу баннера отзывчивой.

Спасибо за помощь.

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