2015-04-22 13 views
0

你能幫我jssoor滾動標誌/縮略圖滑塊嗎?jssor滾動標誌/縮略圖滑塊不會在頁面加載時自動啓動

我已經在我的網站上實現了滾動「合作伙伴標識」。一切都像魅力一樣工作,期待一件事。當我加載頁面時,縮略圖滑塊只顯示一個圖標/徽標,直到我稍微向左或向右拖動它。然後整個動畫開始並需要出現多個徽標。

我想知道我做錯了什麼,或者我錯過了什麼。

我確實包含了必需的.js文件。我不知道這是否有幫助,但這是我的設置:

jQuery(document).ready(function ($) { 
var options = { 

$AutoPlay: true,//[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false 
$AutoPlaySteps: 1,//[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1 
$AutoPlayInterval: 1000,//[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 
$PauseOnHover: 0,//[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1 
$SlideEasing: $JssorEasing$.$EaseLinear, //[Optional] Specifies easing for right to left animation, default value is $JssorEasing$.$EaseOutQuad 
$SlideDuration: 500,//[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500 
$MinDragOffsetToSlide: 0,//[Optional] Minimum drag offset to trigger slide , default value is 20 
$SlideWidth: 60,//[Optional] Width of every slide in pixels, default value is width of 'slides' container 
$SlideHeight: 60,//[Optional] Height of every slide in pixels, default value is height of 'slides' container 
$SlideSpacing: 60,//[Optional] Space between each slide in pixels, default value is 0 
$DisplayPieces: 4,//[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1 
$ParkingPosition: 0,//[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0. 
$UISearchMode: 1,//[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc). 
$PlayOrientation: 1,//[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1 
$DragOrientation: 1//[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0) 
}; 

var jssor_slider1 = new $JssorSlider$("slider1_container", options); 
//responsive code begin 
//you can remove responsive code if you don't want the slider scales while window resizes 
function ScaleSlider() { 
    var bodyWidth = document.body.clientWidth; 
    if (bodyWidth) 
     jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 800)); 
    else 
     window.setTimeout(ScaleSlider, 30); 
} 
ScaleSlider(); 

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

在此先感謝您。

+0

你可以創建一個jsfiddle並顯示它 – nirmal

+0

嗨@nirmal。我很抱歉,我在這裏盡了我最大的努力,但它正在下降。這裏是[鏈接](https://jsfiddle.net/rd5ugmy7/2/)。我從Github分叉了需要的js並指定了jquery 1.9.x版本。這是我第一次,所以我很抱歉。無論如何,在我拖動滑塊並觸發它執行動畫之前,整個想法看起來完全像我的網站上。謝謝。 –

+0

我下載了源代碼,它在我的最後工作。建議設置'$ DisplayPieces:8'。 – jssor

回答

0

好的人,這裏是我如何克服我的情況下滑塊的問題。 This thread and solution給它很多幫助!因此,我增加滑塊的響應縮放該代碼父元素的寬度:

var jssor_slider1 = new $JssorSlider$("slider1_container", options); 

//responsive code begin 

function ScaleSlider() { 
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; 
if (parentWidth) 
    jssor_slider1.$ScaleWidth(Math.min(parentWidth, 1920)); 
else 
    window.setTimeout(ScaleSlider, 30); 
} 
ScaleSlider(); 

$(window).bind("load", ScaleSlider); 
$(window).bind("resize", ScaleSlider); 
$(window).bind("orientationchange", ScaleSlider); 
//responsive code end 
  • 在它的頂部,我與填充包裝滑塊在另一個盒子上雙方這有助於把它打掃乾淨所有的。這也有助於縮放列內的滑塊,因爲我在特定分辨率的頁面底部獲得了「窗口滑塊」。現在它像一個魅力。最後。感謝你們的幫助和支持。沒有這個我就不能管理這個問題。