Need JSSOR Slider to land on specific image depending on referring page

Pretty new to Javascript and am working on a slider that needs to start with a specific image depending on which page the viewer came from.

I've worked a little directly with JSSOR but have come to the point where I can't get it to work.

There are a few points where I could be off in capturing the document referrer or in setting the image index.

Do you need to assign an index to each image in the slider for it to work or are they automatically indexed from top to bottom?

Here's the code for the first image in the slider - no index assigned

<div data-p="208.625">
    <img data-u="image" src="images/Seat_Gray_1.jpg" title="Gray seat option 1" alt="Gray seat, first option"/>
    <img data-u="thumb" src="images/Seat_Gray_1.jpg" width="150px"/>
</div>

Here's the code with the attempt to capture the referring page and set the first image depending on which page from the site it came from:

Here's the original slider code that it started with:

jssor_1_slider_init = function() {

        var jssor_1_options = {
          $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$
          },
          $ThumbnailNavigatorOptions: {
            $Class: $JssorThumbnailNavigator$,
            $Cols: 6,
            $SpacingX: 8,
            $SpacingY: 15,
            $Align: 395
          }
        };

        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

Now, inserting the new code to get the referring url to decide where the startIndex should be. The image page works, but always starts at the first slide (slide 0).

Is below the correct places to add the new code?

jssor_1_slider_init = function() {

/************************ Jump Test start ********************/
        var startIndex = 0;

        var incomingPage = document.referrer;

        if ( incomingPage == "http://www.example.com/black_seats.php" ) {
            startIndex: 4;

        } else if ( incomingPage == "http://www.example.com/red_products.php" ) {
            startIndex: 8;

        } else if ( incomingPage == "http://www.example.com/green_products.php" ) {
            startIndex: 14;

       } else {
           startIndex: 0;
       }

/************************ Jump Test end - start of original script ********************/

        var jssor_1_options = {
          $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$
          },
          $ThumbnailNavigatorOptions: {
            $Class: $JssorThumbnailNavigator$,
            $Cols: 6,
            $SpacingX: 8,
            $SpacingY: 15,
            $Align: 395
          }
        };

/************************ Jump Test add start index ********************/

        var jssor_slider_options = {
            $StartIndex: startIndex
  };

/************************ Final line of original code ********************/

        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

Any help would be greatly appreciated.

Thanks!

Solution

Finally got it to work! Realizing that I needed multiple images from a single page to land on different images, I started looking at sending and capturing the variable from the PHP side. I added the variable string to each image link:

    <a href="seats.php?incomingCategory=blackSeat01">
    <img src="images/BlackSeat01_thumb.jpg" ...
    </a>

Then on the landing image slider page I added this PHP code before the slider initialization to capture the incoming variable:

    <?php
    $incomingCategory = $_GET['incomingCategory'];
    ?>

Once that is sent, in the slider function, I added the following if/else statement to echo the incoming string variable and direct the slider to the correct slide:

    var startIndex = 0;

    //put php variable to a javascript variable 
    var incomingPage = <?php echo json_encode($incomingCategory, JSON_HEX_TAG); ?>; 

        if ( incomingPage == "graySeat01" ) {
            startIndex = 0;

        } 

        else if ( incomingPage == "blackSeat01" ) {
            startIndex = 3;

        }

        else if ( incomingPage == "blackSeat02" ) {
            startIndex = 4;

        }

        else if ( incomingPage == "blueSeat01" ) {
            startIndex = 8;

        }

        else if ( incomingPage == "blueSeat02" ) {
            startIndex = 9;

        }

        else {
            startIndex = 0;
        }

Now it's working perfectly every time. I was having issues with it working early on as I had the variable set to the string with a single =. The string was getting captured, but it wasn't changing the slide. Changed it to == and voila!

Thank you @jssor for the help with this - cheers!