I am implementing a jQuery Fade Slider on a site that I am building, although having a defined height is giving me some issues.
I am using columns defined in percentages for their respective width, col-25 = 25% of the width. My images are placed within a class called .img-holder where the width is set to 100%. As of right now, when using the fade slider, the image height is fine at width and height on my screen but when scaling down into smaller screens the defined height obviously becomes problematic. I didn't want to use a different defined height for each screen variation through @media in my css because I am already doing so with my .col class. Is there a way to use the slider without having to define a height for it?
My CSS currently looks like this:
.img-holder { background: #EEE; overflow:auto; position:relative; width:100%}
.col { float:left }
.col .img-holder { width:100%; height:auto; margin-bottom:14px; margin-top:5px }
.fades-demo { position:relative; width:100%; height: 100% !important; margin-left:auto; margin-right:auto; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
<div class="col col-50">
<div class="img-holder">
<div class="mgtb fades-demo hide" id="fades1">
<div>
<img src="/001.jpg" width="" height="" alt="" class="" />
</div>
<div>
<img src="/002.jpg" width="" height="" alt="" class="" />
</div>
<div>
<img src="/003.jpg" width="" height="" alt="" class="" />
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
initUI()
var defaults = {
speed: 800
,timer: 4000
,autoSlider: false
,hasNav: true
,pauseOnHover: true
,navLeftTxt: ''
,navRightTxt: ''
,zIndex:20
}
,as = $('#fades1').fadeSlider(defaults)
,count = 2
$('#o-btn-des').click(function() {
as.destroy()
})
$('#o-btn-cs').click(function() {
$('#fades1').css({
position:'fixed'
,left:0
,top:0
,width:'100%'
,height:'100%'
,'z-index': 300
})
as.defs.speed = 1000
})
$('#o-btn-ns').click(function() {
var t = '<div class="fades-demo mgtb" id="fades' + ++count +'">' +
($('#fades1 .fade-slides').length?$('#fades1 .fade-slides').html():$('#fades1').html()) +
'</div>'
$('#wrapper').append(t)
$('#fades' + count).fadeSlider(defaults)
})
})
</script>
Any help would be appreciated.
Thanks in advance!