Seeking assistance on optimizing the width of a JavaScript slider to be 100%.
Below is my existing HTML:
<div id="mhblindsshow">
<style type="text/css"> #mhblindsshow img { display:none; } </style>
<a href="blogpost.php"><img src="images/main/1.jpg" /></a>
<a href="blogpost.php"><img src="images/main/2.jpg" /></a>
</div>
Here are the CSS styling rules in place:
.mhSlideshow {
position:relative;
display:block;
margin:0 auto;
}
.mhSlideshow img {
position:absolute;
top:0px;
left:0px;
display:none;
}
In addition, here is the JavaScript responsible for controlling the width:
$(document).ready(function () {
$("#mhblindsshow").mhslideshow({
width: $(window).width(), height: 500,
scaleMode: 'scaleToFill',
firstSlide: 0,
randomPlay: false,
autoPlay: true,
showShadow: false,
loopForever: true, loop: 0,
showBorder: false, borderSize: 6, borderColor: '#FFFFFF',
effectMode: 'blind', interval: 2500, effectSpeed: 1000,
totalSlices: 5, sliceInterval: 50,
showCaption: false,
textCSS: '.title {
font-size:12px;
font-weight:bold;
font-family:Arial;
color:#ffffff;
line-height:200%;
}
.alt {
font-size:12px;
font-family:Arial;
color:#ffffff;
}',
captionPosition: 'bottom', captionBarColor: '#333333', captionBarOpacity: 0.8,
captionBarPadding: 8, captionAlign: 'center',
showNavArrows: true, autoHideNavArrows: false,
showNavDots: true, navDotsBottom: 6,
navDotsAlign: 'right', navDotsLeftRightMargin: 16,
effect: 'fade',
jsFolder: 'js'
});
});
The problem lies in ensuring that the image width consistently fits to 100%, regardless of its original dimensions. Adjusting the CSS with a "width:100%" declaration did not yield the desired outcome.