0
Я использую слайдер изображения jssor с jquery. Он работает хорошо, но имеет проблему с изменением размера слайдера.JSSOR Размер шкалы: Держите размер пуль и стрелок
Я хочу изменить размер слайдера, когда изменяется ширина окна. Для этого jssor-API предоставляет функцию $ ScaleWidth (newWidth). Но я не очень доволен результатом. После того, как $ ScaleWidth будет завершен, он также изменит размеры стрелок и пуль. Это не хорошо.
Если слайдер становится меньше, площадь щелчка для стрелок и пуль становится слишком мала, чтобы щелкнуть или увидеть ее.
Если слайдер становится большим, изображения становятся слишком большими, что вы видите каждый пиксель исходного изображения стрелки/пули.
Вот код, у меня есть на данный момент:
HTML
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>
<title></title>
<style>
html, body{margin: 0px}
</style>
</head>
<body>
<div id="Slider" style="position: relative; top: 0px; left: 0px;">
<!-- Slides Container -->
<div id="Slides" u="slides" style="position: absolute; overflow: hidden; left: 0px; top: 0px;">
[List of DIVs with IMG tags]
</div>
<!--#region Arrow Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
<style>
/* jssor slider arrow navigator skin 12 css */
/*
.jssora12l (normal)
.jssora12r (normal)
.jssora12l:hover (normal mouseover)
.jssora12r:hover (normal mouseover)
.jssora12l.jssora12ldn (mousedown)
.jssora12r.jssora12rdn (mousedown)
*/
.jssora12l, .jssora12r {
display: block;
position: absolute;
/* size of arrow element */
width: 30px;
height: 46px;
cursor: pointer;
background: url(/templates/SliderCore/a12.png) no-repeat;
overflow: hidden;
}
.jssora12l { background-position: -16px -37px; }
.jssora12r { background-position: -75px -37px; }
.jssora12l:hover { background-position: -136px -37px; }
.jssora12r:hover { background-position: -195px -37px; }
.jssora12l.jssora12ldn { background-position: -256px -37px; }
.jssora12r.jssora12rdn { background-position: -315px -37px; }
</style>
<!-- Arrow Left -->
<span id="SliderArrowLeft" u="arrowleft" class="jssora12l" style="top: 102px; left: 0px;">
</span>
<!-- Arrow Right -->
<span id="SliderArrowRight" u="arrowright" class="jssora12r" style="top: 102px; right: 0px;">
</span>
<!--#endregion Arrow Navigator Skin End -->
<!--#region Bullet Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
<style>
/* jssor slider bullet navigator skin 10 css */
/*
.jssorb10 div (normal)
.jssorb10 div:hover (normal mouseover)
.jssorb10 .av (active)
.jssorb10 .av:hover (active mouseover)
.jssorb10 .dn (mousedown)
*/
.jssorb10 {
position: absolute;
}
.jssorb10 div, .jssorb10 div:hover, .jssorb10 .av {
position: absolute;
/* size of bullet elment */
width: 11px;
height: 11px;
background: url(/templates/SliderCore/b10.png) no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb10 div { background-position: -10px -10px; }
.jssorb10 div:hover, .jssorb10 .av:hover { background-position: -40px -10px; }
.jssorb10 .av { background-position: -70px -10px; }
.jssorb10 .dn, .jssorb10 .dn:hover { background-position: -100px -10px; }
</style>
<!-- bullet navigator container -->
<div u="navigator" class="jssorb10" style="bottom: 16px; right: 6px;">
<!-- bullet navigator item prototype -->
<div u="prototype"></div>
</div>
<!--#endregion Bullet Navigator Skin End -->
</div>
</body>
</html>
JavaScript
<script src="jquery-2.1.3.min.js"></script>
<script src="jssor.slider.min.js"></script>
<script>
$(document).ready(function() {
var _SlideshowTransitions = [
{$Duration:1200,$Opacity:2} //Fade
];
var options = {
$AutoPlay: true,
$FillMode: 5,
$DragOrientation: 0,
$AutoPlayInterval: 3000,
$LazyLoading: 1,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 1,
$AutoCenter: 2,
$Steps: 1
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$ChanceToShow: 2,
$AutoCenter: 1,
$Steps: 1,
$Lanes: 1,
$SpacingX: 10,
$SpacingY: 10,
$Orientation: 1
},
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: false
}
};
$.clientCoords = function(){
if ($('html').is('.ie6, .ie7, .ie8, .ie9')){
return {
w:document.documentElement.offsetWidth,
h:document.documentElement.offsetHeight
}
}
else
return {w:window.innerWidth, h:window.innerHeight}
}
var MainDiv = $("#Slider");
var SlidesDiv = $("#Slides");
var client = $.clientCoords();
MainDiv.css("height", client.h+ "px").css("width", client.w+"px");
SlidesDiv.css("height",client.h+ "px").css("width",client.w+"px");
var Slider = new $JssorSlider$('Slider', options);
function ScaleSlider() {
Slider.$ScaleWidth($('#Slider').parent().width());
}
ScaleSlider();
$(window).bind('resizeEnd', function() {
ScaleSlider();
});
$(window).resize(function() {
if(this.resizeTO)
clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
});
</script>
Есть ли другой способ изменить размер области слайдера и перенесите стрелки/пули?
Я думаю, что перемещение стрелок после масштабирования слайдера с помощью jquery не будет проблемой. Но как изменить размер слайдера jssor, когда он включен в AutoPlay, и не перезапускать?
Я пытался использовать
MainDiv.css('width', newWidth+'px').css('height',newHeight+'px');
SlidesDiv.css('width', newWidth+'px').css('height',newHeight+'px');
Но это не эффект бегущего ползунка. Он остался прежним в начале автозапуска.