버튼 클릭시 동적으로 jssor 슬라이더의 자동 재생 속성을 설정하십시오.

Question

안녕하세요. 저는 사용자가 오른쪽에서 왼쪽으로 스 와이프 할 수있는 이미지 배열을 표시하는 슬라이더 기본 버전을 사용했습니다.

/* Gallery items carousel slider - start */ 
    var options = { 
     $StartIndex: 0,     //[Optional] Index of slide to display when initialize, default value is 0 

     $AutoPlay: false,         //[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: 4000,       //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 
     $PauseOnHover: 3,        //[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 
     $Loop: 0,          // Enable loop(circular) of carousel or not, 0: stop, 1: loop, 2 rewind, default value is 1 
     $ArrowKeyNavigation: true,       //[Optional] Allows keyboard (arrow key) navigation or not, default value is false 
     $SlideDuration: 500,        //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500 
     $MinDragOffsetToSlide: 20,       //[Optional] Minimum drag offset to trigger slide , default value is 20 
     //$SlideWidth: 600,         //[Optional] Width of every slide in pixels, default value is width of 'slides' container 
     //$SlideHeight: 300,        //[Optional] Height of every slide in pixels, default value is height of 'slides' container 
     $SlideSpacing: 5,         //[Optional] Space between each slide in pixels, default value is 0 
     $Cols: 1,         //[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 
     $Align: 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) 

     $ThumbnailNavigatorOptions: { 
      $Class: $JssorThumbnailNavigator$,    //[Required] Class to create thumbnail navigator instance 
      $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 
      $ActionMode: 1,         //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1 
      $AutoCenter: 3,        //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3 
      $Lanes: 1,          //[Optional] Specify lanes to arrange thumbnails, default value is 1 
      $SpacingX: 1,         //[Optional] Horizontal space between each thumbnail in pixel, default value is 0 
      $SpacingY: 0,         //[Optional] Vertical space between each thumbnail in pixel, default value is 0 
      $DisplayPieces: 5,        //[Optional] Number of pieces to display, default value is 1 
      $ParkingPosition: 0,       //[Optional] The offset position to park thumbnail 
      $Orientation: 1,        //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1 
      $DisableDrag: true        //[Optional] Disable drag or not, default value is false 
     } 
    }; 
    var arrImg = ["01.jpg", "02.jpg", "03.jpg", "04.jpg"]; 

    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 parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; 
     if (parentWidth) { 
      var sliderWidth = parentWidth; 

      //keep the slider width no more than 600 
      sliderWidth = Math.min(sliderWidth, 600); 

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

    $(window).bind("load", ScaleSlider); 
    $(window).bind("resize", ScaleSlider); 

$(window).bind("orientationchange", ScaleSlider); 

1) 내 페이지 내가이 슬라이더의 자동 실행 속성이 이미지의 자동 스크롤을 사용하려면 true로 설정되도록 설정해야하는 두드리고에 버튼이 있습니다. 그리고 다시 탭하면 jssor 슬라이더의 자동 재생이 중지됩니다.

$('.StartSlideshowBtn') 
    .click(
      function() { 
       slider1_container 
       if (options.$AutoPlay == false) { 
        options.$AutoPlay = true; 
       } 
       else { 
        options.$AutoPlay = false; 
       } 
       jssor_slider1 = new $JssorSlider$("slider1_container", options); 

         }); 

설정을 시도했지만 그 안에 jssor 슬라이더의 개체에 액세스 할 수 없습니다. 도움이 될 것입니다.

Answer 1

/* Gallery items carousel slider - start */ 
var options = { 
    $StartIndex: 0,     //[Optional] Index of slide to display when initialize, default value is 0 

    $AutoPlay: false,         //[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: 4000,       //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 
    $PauseOnHover: 3,        //[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 
    $Loop: 0,          // Enable loop(circular) of carousel or not, 0: stop, 1: loop, 2 rewind, default value is 1 
    $ArrowKeyNavigation: true,       //[Optional] Allows keyboard (arrow key) navigation or not, default value is false 
    $SlideDuration: 500,        //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500 
    $MinDragOffsetToSlide: 20,       //[Optional] Minimum drag offset to trigger slide , default value is 20 
    //$SlideWidth: 600,         //[Optional] Width of every slide in pixels, default value is width of 'slides' container 
    //$SlideHeight: 300,        //[Optional] Height of every slide in pixels, default value is height of 'slides' container 
    $SlideSpacing: 5,         //[Optional] Space between each slide in pixels, default value is 0 
    $Cols: 1,         //[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 
    $Align: 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) 

    $ThumbnailNavigatorOptions: { 
     $Class: $JssorThumbnailNavigator$,    //[Required] Class to create thumbnail navigator instance 
     $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 
     $ActionMode: 1,         //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1 
     $AutoCenter: 3,        //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3 
     $Lanes: 1,          //[Optional] Specify lanes to arrange thumbnails, default value is 1 
     $SpacingX: 1,         //[Optional] Horizontal space between each thumbnail in pixel, default value is 0 
     $SpacingY: 0,         //[Optional] Vertical space between each thumbnail in pixel, default value is 0 
     $Cols: 5,        //[Optional] Number of pieces to display, default value is 1 
     $Align: 0,       //[Optional] The offset position to park thumbnail 
     $Orientation: 1,        //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1 
     $DisableDrag: true        //[Optional] Disable drag or not, default value is false 
    } 
}; 
var arrImg = ["01.jpg", "02.jpg", "03.jpg", "04.jpg"]; 

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 parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; 
    if (parentWidth) { 
     var sliderWidth = parentWidth; 

     //keep the slider width no more than 600 
     sliderWidth = Math.min(sliderWidth, 600); 

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

$(window).bind("load", ScaleSlider); 
$(window).bind("resize", ScaleSlider); 

$(window).bind("orientationchange", ScaleSlider); 

$('.StartSlideshowBtn').click(function() { 
    if (jssor_slider1.$IsAutoPlaying()) { 
     jssor_slider1.$Pause(); 
    } 
    else { 
     jssor_slider1.$Play(); 
    } 
});