I've set up this slide some time ago and today, trying to fix some bugs, I updated the library code.
During some tests I noticed that the pc drag and drop doesn't work anymore, but the touch event does, but I'm not sure it worked before because it's been a while since I checked.
Is there something wrong? Here's the code:
Image html Template:
<div>
<img u="image" src="url" />
<div u="thumb">
<div style="width: 100%; height: 100%; background-image: url('url'); background-size: contain; background-repeat:no-repeat; background-position:center;"></div>
</div>
</div>
Slider.js:
var jssor_slider1;
function getContentHeight(){
return $(window).height()-$("#container").offset().top;
}
jQuery(document).ready(function ($) {
var options = {
$ArrowKeyNavigation: true,
$FillMode: 5,
$AutoPlay: true,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2
},
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$ChanceToShow: 2,
$SpacingX: 8,
$Cols: 10,
$Align: 0
}
};
$("#play_button").attr("state", "active");
jssor_slider1 = new $JssorSlider$('slider1_container', options);
function ScaleSlider() {
var parentWidth = $("#container").innerWidth();
if (parentWidth){
var windowHeight = getContentHeight()*0.83;
var originalWidth = $("#slider1_container").width();
var originalHeight = $("#slider1_container").height();
var thumbHeight = originalHeight/6;
originalHeight += thumbHeight;
var scaleWidth = parentWidth;
if (parentWidth / originalWidth > windowHeight / originalHeight) {
scaleWidth = Math.ceil((windowHeight / originalHeight )* originalWidth);
}
jssor_slider1.$SetScaleWidth(scaleWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
function play(){
jssor_slider1.$Play();
$("#play_button").attr("state", "active");
$("#play_button").one("click", pause);
}
function pause(){
jssor_slider1.$Pause();
$("#play_button").attr("state", "deactive");
$("#play_button").one("click", play);
}
$("#play_button").one("click", pause);
$(window).bind("load", ScaleSlider);
window.setTimeout(ScaleSlider, 30);
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
$(window).bind('resize', ScaleSlider);
}
});
Thanks in advance
The issue was caused by a bug in the library, now with the help of jssor it's all fixed.