-1

I am using jssor full width slider for my website:

Jssor.com

I want to show the next slide when I click anywhere in the current slide image. How can I do this?

I am adding a sample code for it HTML:

jQuery(document).ready(function($) {

      var options = {
        $FillMode: 4,
        $AutoPlay: 1,
        $Idle: 3000,
        $PauseOnHover: 1,
        $ArrowKeyNavigation: false,
        $SlideEasing: $JssorEasing$.$EaseOutQuint,
        $SlideDuration: 800,
        $MinDragOffsetToSlide: 20,
        $SlideSpacing: 0,
        $Cols: 1,
        $Align: 0,
        $UISearchMode: 1,
        $PlayOrientation: 1,
        $DragOrientation: 1,
        $BulletNavigatorOptions: {
          $Class: $JssorBulletNavigator$,
          $ChanceToShow: 2,
          $Steps: 1,
          $Rows: 1,
          $SpacingX: 8,
          $SpacingY: 8,
          $Orientation: 1
        },

        $ArrowNavigatorOptions: {
          $Class: $JssorArrowNavigator$,
          $ChanceToShow: 0,
          $Steps: 1
        }
      };


      $("#slider1_container").css("display", "block");
      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, 1920));
        else
          window.setTimeout(ScaleSlider, 30);
      }
      ScaleSlider();
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 500px; overflow: hidden;">
  <div>
    <img u="image" src2="images/fun/fun.png" />
  </div>
  <div>
    <img u="image" src2="images/fun/1.png" />
  </div>
  <div>
    <img u="image" src2="images/fun/2.png" />
  </div>
  <div>
    <img u="image" src2="images/fun/3.png" />
  </div>
  <div>
    <img u="image" src2="images/fun/4.png" />
  </div>
</div>
<div u="navigator" class="jssorb21" style="bottom: 26px; right: 6px;">
  <!-- bullet navigator item prototype -->
  <div u="prototype"></div>
</div>
jssor
  • 6,995
  • 2
  • 18
  • 21
Raju
  • 74
  • 1
  • 9

2 Answers2

0

You can add custom button on a slide and listen to the click event, if a button is clicked, you can call api `jssor_slider1.$PlayTo(slideIndex);'.

<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 500px; overflow: hidden;">
  ...
  <div>
    <img u="image" src2="images/fun/1.png" />
    <!-- here is your button -->
    <div style="position: absolute; top: 20px; left: 20px; width: 100px; height: 30px;>Next</div>
  </div>
  ...
</div>
jssor
  • 6,995
  • 2
  • 18
  • 21
0

First you have to use default java script code for jssor slider.
Then follow my command:
1. add "visibility:hidden" to "arrowleft"
2. remove svg box which is inside "arrowright"
3. set width and height of "arrowright" equal to width and height of main div. default is 1300*500.
4. add "margin:0 0;" to "arrowright".
5. In "arrowright" change "data-scale" to 1, and "data-scale-right" to 0.

this is what happend if you follow this instruction:

<div data-u="arrowleft" class="jssora051" style="width:65px;height:65px;top:0px;left:25px;visibility:hidden;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
    <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
        <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
    </svg>
</div>
<div data-u="arrowright" class="jssora051" style="width:1300px;height:500px;top:0px;right:0px;margin:0 0;" data-autocenter="2" data-scale="1" data-scale-right="0">
</div>
Alireza1996
  • 31
  • 6