How to make Leaderboard slider banner responsive?

Question

I tried very hard to make this leaderboard slider banner but could not succeed. This is the Banner Test Page ( The Second Sliding Banner ).

When I use without this slider my Webpage is fully responsive. You can check here my Original Page

Please help me in makeing my Banner Test Page Responsive.

Thanks for the help.

.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

You'll have to create al your banners inside slider as same height-width / resolution first

Then you can give max-width:100%; and height:90px to your slider

That will make it as much responsive as the first banner in your site

Changes needed in your CSS

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

Try these media queries for your height issue on small screen devices

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

Just keep in mind that you'd have to make all banner of same height-width for the best result of images in banners

For the latest edit, make this changes

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

.sliderWrapper .slider{
background:#f9f9f9;
}