Как заполнить div классом col-md-8 в bootstrap и jssor?

Я хочу, чтобы контейнер изображений в компоненте jssor заполнил div классом col-md-8. Я попытался удалить ширину и высоту, изменить атрибут положения, не работает ни с процентами, ни с автоматическими атрибутами, большую часть времени изображение исчезает. Есть ли способ сделать это??

<div class="col-md-8">
    <div id="slider1_container" class="" style="position: relative; top: 0px; left: 0px; width: 650px; height: 350px;">
        <!-- Slides Container -->
        <div data-u="slides" class="" style="cursor: move; position: relative; overflow: hidden; left: 0px; top: 0px; width: 650px; height: 350px;">
            @foreach (var image in Model.RandomAlbum.Images)
            {
                <div><img src="~/Content/uploads/original/@image.Name" data-u="image" class="img-responsive" /></div>
            }
        </div>
    </div>
</div>

twitter-bootstrap-3 jssor
person Luis Lopez    schedule 19.11.2014    source источник
comment
Вы можете просто поместить ползунок в «col-md-8» без изменений. В чем проблема?   -  person jssor    schedule 20.11.2014
comment
Да, но не работает, мне нужно указать высоту и ширину, если я этого не сделаю, изображение не будет отображаться!!! Я просто хочу, чтобы изображение заполнило div классом col-md-8.   -  person Luis Lopez    schedule 21.11.2014

Ответы (1)


arrow_upward
2
arrow_downward

Ползунок Jssor указан с фиксированным размером, но вы можете масштабировать его до любого размера, вызвав API $ScaleWidth.

Используйте следующий код, вы можете разместить ползунок в родительском контейнере.

    //responsive code begin
    //you can remove responsive code if you don't want the slider scales
    //while window resizes
    function ScaleSlider() {
        var parentWidth = $('#slider1_container').parent().width();
        if (parentWidth) {
            jssor_slider1.$ScaleWidth(parentWidth);
        }
        else
            window.setTimeout(ScaleSlider, 30);
    }
    //Scale slider after document ready
    ScaleSlider();

    //Scale slider while window load/resize/orientationchange.
    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);
    //responsive code end

Ссылка: http://www.jssor.com/development/tip-make-responsive-slider.html

person jssor    schedule 21.11.2014
comment
измененный код, который вы предоставили, отлично сработал для меня, спасибо: D - person Akshay Shrivastav; 29.03.2017