jssor полноразмерный или полноэкранный слайдер/возможно?

можно ли сделать эту демонстрацию http://www.jssor.com/demos/full-width-slider.html на весь экран? как суперсайз карусель http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

Спасибо


person Johnny Derp    schedule 28.04.2014    source источник


Ответы (3)


пожалуйста, используйте следующий код, чтобы масштабировать ползунок на весь экран,

//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
    var windowWidth = $(window).width();

    if (windowWidth) {
        var windowHeight = $(window).height();
        var originalWidth = jssor_slider1.$OriginalWidth();
        var originalHeight = jssor_slider1.$OriginalHeight();

        var scaleWidth = windowWidth;
        if (originalWidth / windowWidth > originalHeight / windowHeight) {
            scaleWidth = Math.ceil(windowHeight / originalHeight * originalWidth);
        }

        jssor_slider1.$ScaleWidth(scaleWidth);
    }
    else
        window.setTimeout(ScaleSlider, 30);
}

ScaleSlider();

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

и оберните контейнер слайдера

<div style="position: relative; width: 100%; overflow: hidden;">
    <div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">

        <!-- use 'margin: 0 auto;' to auto center element in parent container -->
        <div id="slider1_container" style="...margin: 0 auto;..." ...>
        </div>

    </div>
</div>

Посетите Полноэкранный слайдер с исходным кодом.

person jssor    schedule 28.04.2014
comment
Спасибо, я только что открыл этот демонстрационный html и заменил код, но почему-то вся ширина все еще 1300 пикселей, есть идеи? - person Johnny Derp; 29.04.2014
comment
У меня тоже отлично работает. спасибо джссор - person baroquedub; 29.05.2014
comment
У меня та же проблема. Ширина 1300px. Каким-то образом контейнер исчезает с экрана? Есть идеи? - person Kashama Shinn; 13.09.2014
comment
все равно не везет. только навигационные кнопки 1, 2, 3, 4 опускаются до нижнего центрального ползунка и возвращаются к исходному размеру. - person Kashama Shinn; 13.09.2014
comment
полноэкранный ползунок показывает вертикальную полосу прокрутки. Можем ли мы избавиться от него? - person Savaratkar; 28.09.2014
comment
добавить 'overflow: hidden' к элементу body. ‹стиль тела=маржа: 0; заполнение: 0; переполнение: скрыто;› - person jssor; 28.09.2014
comment
для тех, кто сталкивается с проблемой фиксированной ширины, пожалуйста, замените приведенный выше код правильно, он будет работать ... и спасибо @jssor за отличную работу - person himanshu; 11.10.2014
comment
В какой файл я должен добавить вышеуказанный js @jssor? - person AndrewL64; 28.06.2015
comment
@Andrew Lyndem Пожалуйста, откройте view-source:http://www.jssor.com/testcase/full-screen-slider.source.html в браузере Chrome. - person jssor; 29.06.2015
comment
Я использовал плагин jssor wordpress, и мне было трудно найти способ добавить вышеуказанное в скрипт, поскольку он динамически генерируется. Хоть разберись :) - person AndrewL64; 29.06.2015

Существует новый API $ScaheHeight с Jssor Slider 17.0 или более поздней версии.

//responsive code begin
//you can remove responsive code if you don't want the slider to scale along with window
function ScaleSlider() {
    var windowWidth = $(window).width();

    if (windowWidth) {
        var windowHeight = $(window).height();
        var originalWidth = jssor_slider1.$OriginalWidth();
        var originalHeight = jssor_slider1.$OriginalHeight();

        if (originalWidth / windowWidth > originalHeight / windowHeight) {
            jssor_slider1.$ScaleHeight(windowHeight);
        }
        else {
            jssor_slider1.$ScaleWidth(windowWidth);
        }
    }
    else
        window.setTimeout(ScaleSlider, 30);
}

ScaleSlider();

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

Ссылка: http://www.jssor.com/testcase/full-screen-slider-new-api.source.html

person jssor    schedule 15.10.2014

Основываясь на ответах выше, у меня это работает, но div «slider1_container» должен быть обернут следующим образом:

<div style="position: relative; width: 100%; overflow: hidden;">

    <div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">


 <div id="slider1_container"> 
 ... 
 ... 
 </div>


 </div>
</div>
person Abdo Belk    schedule 16.02.2015
comment
Если я попытаюсь сделать это, я получаю ошибку jquery Uncaught Error: невозможно масштабировать ползунок jssor, «ширина» «внешнего контейнера» не указана. Укажите ширину в пикселях. например 'width: 600px;', поэтому я не могу установить ширину в % - person user3763117; 27.02.2015
comment
Вы используете последнюю версию jssor? - person Abdo Belk; 28.02.2015