I have implemented a rotating banner on my website by using the code from unslider.com. The banner consists of four images, each 2080px wide, which is the maximum size I want for my site. I aim to scale both the website and the images down to a minimum width of 1024px. While the website successfully resizes accordingly (stops at 1024px), the images do not adjust.
Therefore, I am seeking help to find a solution that will allow the banner and its images to resize proportionally to a minimum of 1024px. To facilitate this process, I have set up a CodePen demo here:
http://codepen.io/trevoray/pen/LENvwx/
Here is the HTML code block corresponding to the implementation:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - Rotating Image Banner that resizes down to minimum size</title>
<style type="text/css">
#container {
max-width:1280px;
min-width:1024px;
}
.banner {
position: relative;
overflow: auto;
width:1280px;
}
.banner ul {margin: 0; padding: 0; }
.banner li {
list-style: none;
}
.banner ul li {
float: left;
display:block;
max-width:100%;
height:295px;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
}
#image1 {
background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image1.png");
}
#image2 {
background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image2.png");
}
#image3 {
background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image3.png");
}
#image4 {
background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image4.png");
}
</style>
</head>
<body>
<div id="container">
<div class="banner">
<ul>
<li id="image1"></li>
<li id="image2"></li>
<li id="image3"></li>
<li id="image4"></li>
</ul>
</div>
{Lorem Ipsum text remains unchanged for brevity}
</div>
<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src='http://unslider.com/unslider.min.js'></script>
<script>
$(function() {
$('.banner').unslider();
});
</script>
</body>
</html>