Problem with Javascript loop

Question

Hello I’m trying to create a list of products giving a loop, but I’m having trouble giving the loop in the Javascript file.

I am posting the files and access addresses so that they can check the error, and help me to put it to work.

Addresses:

http://lccinformatica.com.br/prod_index.php - At this address you check the error.

http://lccinformatica.com.br/prod.php - At this address as it should be.

prod_index.php file:

    <div class="center_content" style="background:<?php echo $res['fundosite_cor']; ?>; width:588px; float:left;">
    <?php
    include "conexao.php";
    $codigo = $_POST['codigo'];
    $img01 = $_POST['img01'];
    $img02 = $_POST['img02'];
    $img03 = $_POST['img03'];
    $img04 = $_POST['img04'];
    $titulo = $_POST['titulo'];
    $preco = $_POST['preco'];
    $query = mysql_query("SELECT * FROM produto ORDER BY RAND() LIMIT 9");

    while($res = mysql_fetch_array($query)){
    ?>

    <div style="background-color:<?php echo $res['fundosite_cor']; ?>;; padding:11px;" class="center_prod_box">

            <div id="titulo" class="product_title">
                <?php echo $res['titulo']; ?>
            </div>
        <script type="text/javascript" src="js/jssor.js"></script>
        <script type="text/javascript" src="js/jssor.slider.js"></script>
        <script>
            jssor_slider2_starter = function (containerId) {
                var options = {
                    $DragOrientation: 3,                                //[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)

                    $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                        $Class: $JssorBulletNavigator$,                       //[Required] Class to create 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: 0,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                        $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                        $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                        $SpacingX: 0,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
                        $SpacingY: 0,                                   //[Optional] Vertical space between each item in pixel, default value is 0
                        $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                    }
                };
                var jssor_slider2 = new $JssorSlider$(containerId, options);
            };
        </script>
        <!-- Jssor Slider Begin -->
        <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
        <div id="slider2_container" style="position: relative; top: 0px; left: 0px; width: 173px;
            height: 173px; background-color:<?php echo $res['fundosite_cor']; ?>;">

            <!-- Loading Screen -->
            <div u="loading" style="position: absolute; top: 0px; left: 0px;">
                <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                    background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
                </div>
                <div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat center center;
                    top: 0px; left: 0px;width: 100%;height:100%;">
                </div>
            </div>

            <!-- Slides Container -->
            <div u="slides" style="background-color:<?php echo $res['fundosite_cor']; ?>;cursor: move; position: absolute; left: 0px; top: 2px; height:150px; width:173px; text-align:center;
                overflow: hidden;">
                <div>
                    <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                        <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img01']; ?>" />
                    </a>
                </div>
                <div>
                    <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                        <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img02']; ?>" />
                    </a>
                </div>
                <div>
                    <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                        <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img03']; ?>" />
                    </a>
                </div>
                <div>
                    <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                        <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img04']; ?>" />
                    </a>
                </div>
            </div>

            <!--#region Bullet Navigator Skin Begin -->
            <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
            <style>
                /* jssor slider bullet navigator skin 03 css */
                /*
                .jssorb03 div           (normal)
                .jssorb03 div:hover     (normal mouseover)
                .jssorb03 .av           (active)
                .jssorb03 .av:hover     (active mouseover)
                .jssorb03 .dn           (mousedown)
                */
                .jssorb03 {
                    position: absolute;
                }
                .jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {
                    position: absolute;
                    /* size of bullet elment */
                    width: 21px;
                    height: 21px;
                    text-align: center;
                    line-height: 21px;
                    color: white;
                    font-size: 12px;
                    background: url(img/b03.png) no-repeat;
                    overflow: hidden;
                    cursor: pointer;
                }
                .jssorb03 div { background-position: -5px -4px; }
                .jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }
                .jssorb03 .av { background-position: -65px -4px; }
                .jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }
            </style>
            <!-- bullet navigator container -->
            <div u="navigator" class="jssorb03" style="bottom: 1px; left: 40px;">
                <!-- bullet navigator item prototype -->
                <div u="prototype"><div u="numbertemplate"></div></div>
            </div>
            <!--#endregion Bullet Navigator Skin End -->

            <!-- Trigger -->
            <script>
                jssor_slider2_starter('slider2_container');
            </script>
        </div>
        <!-- Jssor Slider End -->                
            <div id="preco" class="prod_price">
                <span style="">
                R$ <?php echo $res['preco']; ?>
                </span>
            </div>                        

            <div id="carrinho" class=""><br />
                <a href="prod_carrinho.php?acao=add&codigo=<?php echo $res['codigo']; ?>">
                    <img style="position:relative;top:50%;transform:translateY(-50%); "width="20" src="img/carrinho.png" title="Por no Carrinho" />
                </a>
            </div>                        
                        <hr id="linha1" />
                        <hr id="linha2" />
        </div>
    <?php
    }
    ?>

    </div>

This Prod.php file I picked up direct in a demo of Jquery and made some adaptations.

I hope my friends can shed some light on where or what I’m missing.