Ползунок карусели JSSOR не работает в IE

var BulletNavOptions = { $Class: SliderOpt.BulletNavigatorOptions.Class, $ChanceToShow: 1, $AutoCenter: 1, $Steps: 1, $Lanes: 3, $SpacingX: 10, $SpacingY: 5, $Orientation: 1 };
		
var ArrowNavOptions = { $Class: SliderOpt.ArrowNavigatorOptions.Class, $ChanceToShow: 1, $AutoCenter: 0, $Steps: 1 };
		
var options = { $AutoPlay: true, $AutoPlaySteps: 1, $AutoPlayInterval: 3000, $FillMode:0, $DisplayPieces: 3, $SlideWidth: 400, $SlideHeight: 300, $ArrowKeyNavigation: true, $SlideDuration: 200, $MinDragOffsetToSlide: 0, $SlideSpacing: 10, $ParkingPosition: 0, $PauseOnHover: 3, $PlayOrientation: 1, $DragOrientation: 1, $StartIndex: 0, $Loop: 1, $LazyLoading: 1, $BulletNavigatorOptions: BulletNavOptions, $ArrowNavigatorOptions: ArrowNavOptions};

var jssor_slider1 = new $JssorSlider$(_container, options);
<DIV id=span_mlgrid class=x-form-con-grid style="OVERFLOW: hidden; HEIGHT: 300px; WIDTH: 1210px; POSITION: relative" jssor-slider="true">
<DIV style="OVERFLOW: hidden; HEIGHT: 300px; WIDTH: 1210px; POSITION: absolute; LEFT: 0px; TOP: 0px" u="slides">
<DIV><IMG src="../Resources/chrysalis/images/PlfControlLibrary/Default/001.jpg" width=720 height=480 u="image"></DIV>
<DIV><IMG src="../Resources/chrysalis/images/PlfControlLibrary/Default/002.jpg" width=720 height=480 u="image"></DIV>
<DIV><IMG src="../Resources/chrysalis/images/PlfControlLibrary/Default/003.jpg" width=720 height=480 u="image"></DIV>
<DIV><IMG src="../Resources/chrysalis/images/PlfControlLibrary/Default/004.jpg" width=720 height=480 u="image"></DIV></DIV>
<STYLE type=text/css>.jssorb03 DIV {
	OVERFLOW: hidden; CURSOR: pointer; BACKGROUND: url(../Resources/chrysalis/images/PlfControlLibrary/b05.png) no-repeat
}
.jssorb03 DIV:hover {
	OVERFLOW: hidden; CURSOR: pointer; BACKGROUND: url(../Resources/chrysalis/images/PlfControlLibrary/b05.png) no-repeat
}
.jssorb03 .av {
	OVERFLOW: hidden; CURSOR: pointer; BACKGROUND: url(../Resources/chrysalis/images/PlfControlLibrary/b05.png) no-repeat
}
.jssorb03 DIV {
	BACKGROUND-POSITION: -5px -4px
}
.jssorb03 DIV:hover {
	BACKGROUND-POSITION: -35px -4px
}
.jssorb03 .av:hover {
	BACKGROUND-POSITION: -35px -4px
}
.jssorb03 .av {
	BACKGROUND-POSITION: -65px -4px
}
.jssorb03 .dn {
	BACKGROUND-POSITION: -95px -4px
}
.jssorb03 .dn:hover {
	BACKGROUND-POSITION: -95px -4px
}
</STYLE>

<DIV style="RIGHT: 6px; POSITION: absolute; BOTTOM: 15px" u="navigator" class="jssorb03">
<DIV style="FONT-SIZE: 12px; HEIGHT: 21px; WIDTH: 21px; POSITION: absolute; COLOR: white; TEXT-ALIGN: center; LINE-HEIGHT: 21px" u="prototype"></DIV></DIV>
<STYLE type=text/css>.jssora03l {
	OVERFLOW: hidden; CURSOR: pointer; BACKGROUND: url(../Resources/chrysalis/images/PlfControlLibrary/a03.png) no-repeat; POSITION: absolute; DISPLAY: block
}
.jssora03r {
	OVERFLOW: hidden; CURSOR: pointer; BACKGROUND: url(../Resources/chrysalis/images/PlfControlLibrary/a03.png) no-repeat; POSITION: absolute; DISPLAY: block
}
.jssora03ldn {
	OVERFLOW: hidden; CURSOR: pointer; BACKGROUND: url(../Resources/chrysalis/images/PlfControlLibrary/a03.png) no-repeat; POSITION: absolute; DISPLAY: block
}
.jssora03rdn {
	OVERFLOW: hidden; CURSOR: pointer; BACKGROUND: url(../Resources/chrysalis/images/PlfControlLibrary/a03.png) no-repeat; POSITION: absolute; DISPLAY: block
}
.jssora03l {
	BACKGROUND-POSITION: -3px -33px
}
.jssora03r {
	BACKGROUND-POSITION: -63px -33px
}
.jssora03l:hover {
	BACKGROUND-POSITION: -123px -33px
}
.jssora03r:hover {
	BACKGROUND-POSITION: -183px -33px
}
.jssora03ldn {
	BACKGROUND-POSITION: -243px -33px
}
.jssora03rdn {
	BACKGROUND-POSITION: -303px -33px
}
</STYLE>
<SPAN style="HEIGHT: 55px; WIDTH: 55px; POSITION: absolute; LEFT: 8px; TOP: 40%" u="arrowleft" class="jssora03l"></SPAN><SPAN style="HEIGHT: 55px; WIDTH: 55px; RIGHT: 8px; POSITION: absolute; TOP: 40%" u="arrowright" class="jssora03r"></SPAN></DIV>

Я динамически создал слайдер карусели jssor, который отлично работает в Chrome и Firefox, но не в IE.

Следующее условие для контейнера слайдов, несмотря на то, что указано переполнение: скрытый, не выполняется только в IE, ***jssor.slider.js:2812*** if (slidesContainerOverflow != "hidden" && (slidesContainerOverflowX != "hidden" || slidesContainerOverflowY != "hidden")) $JssorDebug$.$Fail("Overflow of slides container wrong specification, it should be specified as 'hidden' (style='overflow:hidden;').");

Фрагмент кода для создания слайдов:

divSlides = document.createElement("div");        
            divSlides.setAttribute("u","slides");
            var slidestyle = "position: absolute; overflow: hidden; left: 0px; top: 0px;";      
            divSlides.setAttribute("style",slidestyle);

person Vivek    schedule 24.03.2015    source источник


Ответы (1)


Пожалуйста, замените

divSlides.setAttribute("style",slidestyle);

с

divSlides.style.cssText = slidestyle;

Если проблема не устранена, пожалуйста, разместите сгенерированный HTML-код здесь.

person jssor    schedule 24.03.2015
comment
Я заменил код, как было предложено, и теперь проверка для слайдов прошла, но та же проблема возникла для BulletNavigator (jssor.slider.js:3325) и ArrowNavigator (jssor.slider.js:3363). После замены стилей навигатора этим предложенным кодом ползунок отобразился без каких-либо ошибок, но навигаторы не видны. Навигаторы генерируются с Display:none в определении стиля. Сгенерированный html-код был размещен здесь с. - person Vivek; 25.03.2015
comment
Я просмотрел код, это не сырой код, который вы сгенерировали. - person jssor; 25.03.2015
comment
Я имею в виду код, который вы сгенерировали (создали) динамически. - person jssor; 25.03.2015
comment
Я разместил сгенерированный HTML-контент и параметры, указанные для инициализации ползунка. - person Vivek; 26.03.2015
comment
Я заметил, что ширина и высота контейнера «слайды» не указаны. - person jssor; 26.03.2015
comment
Заданы ширина и высота контейнера слайдов. <DIV id=span_mlgrid class=x-form-con-grid style="OVERFLOW: hidden; HEIGHT: 300px; WIDTH: 1210px; POSITION: relative" jssor-slider="true"> <DIV style="OVERFLOW: hidden; HEIGHT: 300px; WIDTH: 1210px; POSITION: absolute; LEFT: 0px; TOP: 0px" u="slides"> - person Vivek; 26.03.2015
comment
Кстати, вам не нужно динамически генерировать css навигатора, его можно переместить. - person jssor; 26.03.2015
comment
Да, это работает, когда сгенерированный код тестируется отдельно, но когда я интегрирую его с моим приложением, навигаторы не видны, хотя я не смог найти никакой разницы в сгенерированном коде, а также в отображаемом html-коде. Вы можете взглянуть на это? - person Vivek; 27.03.2015
comment
Любой URL-адрес, который я могу посмотреть? - person jssor; 27.03.2015
comment
URL-адрес не открыт, используйте этот URL-адрес (действителен в течение 20 минут) для подключения к моему рабочему столу ссылка - person Vivek; 27.03.2015
comment
Кажется, это ссылка для скачивания. - person jssor; 27.03.2015
comment
время ожидания истекло. подключитесь по ссылке - person Vivek; 27.03.2015
comment
Я не могу получить доступ к вашей странице, требуется плагин Java. - person jssor; 27.03.2015
comment
еще раз, пожалуйста, используйте divSlides.style.cssText = slidestyle; вместо этого. - person jssor; 27.03.2015
comment
Я использовал приведенный выше синтаксис, чтобы установить стиль для слайдов, маркеров и стрелок, но проблема остается, только когда я интегрирую это в свое приложение, тогда как оно отлично работает как отдельная html-страница. И эта проблема возникает только в IE. - person Vivek; 27.03.2015
comment
Было бы здорово, если бы вы заглянули в приложение. Можете ли вы подключиться через URL-адрес еще раз? - person Vivek; 27.03.2015
comment
Еще java(TM) is required. - person jssor; 27.03.2015
comment
Я получил ваше письмо. Пожалуйста, сообщите мне, как вы звоните CreateImageSlider. - person jssor; 27.03.2015