0

構築中のサイトに jQuery Fade Slider を実装していますが、高さが定義されているといくつかの問題が発生します。

それぞれの幅のパーセンテージで定義された列を使用しています。col-25 = 幅の 25% です。私の画像は、幅が 100% に設定されている .img-holder というクラス内に配置されています。現時点では、フェード スライダーを使用する場合、画像の高さは画面の幅と高さで問題ありませんが、小さな画面に縮小すると、画像と段落テキストを左右の矢印で移動できるため、定義された高さが明らかに問題になります。下。CSS で @media クエリを使用して、画面のバリエーションごとに異なる定義済みの高さを使用したくありませんでした。高さを定義せずにスライダーを使用する方法はありますか?

私のCSSは現在次のようになっています：

.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>

JS

<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>
4

2 に答える 2

0

答えは遅すぎるようですが。この問題に直面している他の誰かが、私が作成した jquery-fade-slider プラグインを試してみたいと思うかもしれません。

ドキュメントはhttp://jqueryfadeslider.comでアクセスでき、デモはhttp://jqueryfadeslider.com/demoで見ることができます。

于 2015-10-12T01:21:33.723 に答える
0

私は次のように考えます：

.fades-demo { height: auto !important; }
.fades-demo img { max-width: 100%; width: 100%; height: auto; }

うまくいくでしょう。もちろん、これは、使用しているスライダーがフロート/ポジショニングを介して通常のフローからすべての画像を削除しないことを前提としています。これにより、コンテナが折りたたまれます。画像の縦横比が一定で、事前にわかっている場合は、いくつかの解決策があります。または、適切な縦横比を維持するためだけに、visible:hidden であるコンテナー内の画像を非表示にすることも別の解決策です。どのフェーダー/スライダーを使用しているかを知らなければ、これ以上の手助けは難しいでしょう。上記が機能しない場合は、jsFiddle を設定してみてください。

于 2013-08-16T22:00:37.957 に答える