<!-- Bullet Navigator Style -->
    <style>
        .jssorb21 {
            position: absolute;
            bottom: 26px;
            left: 6px;
        }
        .jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
            position: absolute;
            /* size of bullet elment */
            width: 19px;
            height: 19px;
            text-align: center;
            line-height: 19px;
            color: white;
            font-size: 12px;
            background: url(../images/slide/b21.png) no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb21 div { background-position: -5px -5px; }
        .jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
        .jssorb21 .av { background-position: -65px -5px; }
        .jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }
    </style>
    <!-- Arrow Navigator Style -->
    <style>
        .jssora21l, .jssora21r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 55px;
            height: 55px;
            cursor: pointer;
            background: url(../images/slide/a21.png) center center no-repeat;
            overflow: hidden;
        }
        .jssora21l { background-position: -3px -33px; top: 123px; left: 8px; }
        .jssora21r { background-position: -63px -33px; top: 123px; right: 8px; }
        .jssora21l:hover { background-position: -123px -33px; }
        .jssora21r:hover { background-position: -183px -33px; }
        .jssora21l.jssora21ldn { background-position: -243px -33px; }
        .jssora21r.jssora21rdn { background-position: -303px -33px; }
    </style>
    <script type="text/javascript" src="../css_js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../css_js/jssor.js"></script>
    <script type="text/javascript" src="../css_js/jssor.slider.js"></script>
    <script>
        jQuery(document).ready(function ($) {
            var options = {
                $FillMode: 2, 
                $AutoPlay: true,  
                $AutoPlayInterval: 4000,  
                $PauseOnHover: 1,
                $ArrowKeyNavigation: true, 
                $SlideEasing: $JssorEasing$.$EaseOutQuint,
                $SlideDuration: 1800,                              
                $MinDragOffsetToSlide: 20,                          
                $SlideSpacing: 0,                                   
                $DisplayPieces: 1,                         
                $ParkingPosition: 0,                             
                $UISearchMode: 1,                                
                $PlayOrientation: 1,                           
                $DragOrientation: 1,                              

                $BulletNavigatorOptions: {                               
                    $Class: $JssorBulletNavigator$,
                    $ChanceToShow: 2,                               
                    $AutoCenter: 1,                                 
                    $Steps: 1,                                      
                    $Lanes: 1,                                     
                    $SpacingX: 8,                                   
                    $SpacingY: 8,                                   
                    $Orientation: 1                                 
                },

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

            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, 1000));
                else
                    window.setTimeout(ScaleSlider, 0);
            }
												*/
												function ScaleSlider() {
                var bodyWidth = 1000;
                
																/*
																if (bodyWidth)
                    jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1000));
                else
                    window.setTimeout(ScaleSlider, 0);
																*/
            }
            ScaleSlider();

            $(window).bind("load", ScaleSlider);
            //$(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
            //responsive code end
        });
    </script>
    <!-- Jssor Slider Begin -->
    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
    <div id="slider1_container" style="position: relative;width: 1000px; height: 560px; overflow: hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" style="top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block;
                top: 0px; left: 0px; width: 100%; height: 100%;">
            </div>
            <div style="position: absolute; display: block; background: url(/images/slide/loading.gif) no-repeat center center;
                top: 0px; left: 0px; width: 100%; height: 100%;">
            </div>
        </div>
        <!-- Slides Container -->
        <div data-u="slides" style="cursor: move; width: 1000px;
            height: 560px; overflow: hidden;">
            <?=$slideImg?>
        </div>
                
        <!--#region Bullet Navigator Skin Begin -->
        <!-- bullet navigator container -->
        <div data-u="navigator" class="jssorb21">
            <!-- bullet navigator item prototype -->
            <div data-u="prototype"></div>
        </div>
        <!--#endregion Bullet Navigator Skin End -->

        <!--#region Arrow Navigator Skin Begin -->
        <!-- Arrow Left -->
        <span data-u="arrowleft" class="jssora21l">
        </span>
        <!-- Arrow Right -->
        <span data-u="arrowright" class="jssora21r">
        </span>
        <!--#endregion Arrow Navigator Skin End -->
    </div>