0

だから私はここのページにコンテンツスライダーを持っています：http://helpmyedu.com/asdtest-2、レスポンシブ（100％幅）にしたいと思います.. ここに画像の説明を入力

開発者ツールで次のコードを変更することで、レスポンシブに成功しました。

ここに画像の説明を入力

ただし、スタイル シートの最初の 100% しか変更できません。下の 2 つは、次の javascritp によって制御されます。

    <script type="text/javascript">

        $(document).ready(function() {
            $.noConflict();

            jQuery('#services-example-1').services(
                {
                    width:1144,
                    height:300,
                    slideAmount:6,
                    slideSpacing:30,
                    touchenabled:"on",
                    mouseWheel:"on",
                    hoverAlpha:"off",
                    slideshow:6000,
                    hovereffect:"on",
                    callBack:function() { }

                });


    });
    </script>

「幅：1144」を％にするにはどうすればよいですか？

または、このスライダーをレスポンシブにできますか? ありがとうございます！

4

1 に答える 1

0

1 つのスポットを単純に変更して、このスライダーをレスポンシブにすることはできません。もちろん、js の値を変更することはできますが、すべての子要素が元のサイズのままであるため、全幅のスライダーが表示されます。

できることは、css (.imgholder .thumb などのクラス) の各要素をオーバーライドして、ページ サイズに応答するようにすることです。さらに、js の幅をページ幅に基づいた値に調整する必要があります。このような：

var sliderwidth = 
                    Math.round(parseInt(jQuery('#services-example-1').css('width'))-(50)); //Leave some margin for padding and scroll bar
                    jQuery('#services-example-1').services(
                        {
                            width:sliderwidth,
                            height:300,
                            slideAmount:6,
                            slideSpacing:30,
                            touchenabled:"on",
                            mouseWheel:"on",
                            hoverAlpha:"off",
                            slideshow:6000,
                            hovereffect:"off"
                        });

これで問題が解決することを願っていますが、画像を含めるには高さが必要なので、高さは変更しませんでした。

さらに 2 つの点に気付きました: 1. この jquery スライダー プラグインには少しバグがあります。特に、ページのサイズを変更したり、ブラウザーをしばらくフリーズさせたりすると、スライダーが失われる可能性があります。それらはすべて本当に必要ですか？サイトメイトの速度を落とします。

于 2013-11-14T05:29:48.753 に答える