jQuery Fade Slider - 删除定义的高度？ [英] jQuery Fade Slider - remove defined height?

问题描述

我正在我正在构建的网站上实现一个jQuery Fade Slider，虽然有一个明确的高度给了我一些问题。



我使用的是已定义的列在各自宽度的百分比中，col-25 =宽度的25％。我的图像放在一个名为.img-holder的类中，其宽度设置为100％。截至目前，当使用淡入淡出滑块时，我的屏幕上的图像高度在宽度和高度上都很好，但是当缩小到较小的屏幕时，定义的高度显然会成为问题。我不想在我的css中通过@media为每个屏幕变体使用不同的定义高度，因为我已经使用我的.col类。有没有办法使用滑块而不必为它定义高度？

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>
//scripts
$(document).ready(function() {


    //initUI
    initUI()

    //init slider 1
    var defaults = {
        speed: 800
        ,timer: 4000
        ,autoSlider: false
        ,hasNav: true
        ,pauseOnHover: true
        ,navLeftTxt: ''
        ,navRightTxt: ''
        ,zIndex:20
    }
    ,as = $('#fades1').fadeSlider(defaults)
    ,count = 2

    //destroy
    $('#o-btn-des').click(function() {
        as.destroy()
    })

    //resize wrapper
    $('#o-btn-cs').click(function() {
        $('#fades1').css({
            position:'fixed'
            ,left:0
            ,top:0
            ,width:'100%'
            ,height:'100%'
            ,'z-index': 300
        })
        as.defs.speed = 1000
    })

    //resize wrapper
    $('#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!

推荐答案

（document）.ready（function（）{


// initUI
initUI（）

// init slider 1
var defaults = {
speed： 800
，timer： 4000
，autoSlider： false
，hasNav： true
，pauseOnHover： true
，navLeftTxt：' '
，navRightTxt：' '
，zIndex： 20
}
， as =

(document).ready(function() { //initUI initUI() //init slider 1 var defaults = { speed: 800 ,timer: 4000 ,autoSlider: false ,hasNav: true ,pauseOnHover: true ,navLeftTxt: '' ,navRightTxt: '' ,zIndex:20 } ,as =

（' ＃fades1' ）.fadeSlider（默认值）
，count = 2

// destroy

('#fades1').fadeSlider(defaults) ,count = 2 //destroy

（' ＃o-btn-des'）。click（function（）{
as .destroy（）
}）

// 调整大小包装

('#o-btn-des').click(function() { as.destroy() }) //resize wrapper

这篇关于jQuery Fade Slider - 删除定义的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！