jssor - 某种 JQuery 的冲突？

Question

几件事： 我认为有一个 JQuery 冲突，因为导航栏不会加载或滑块不会工作 我无法让 jssor 滑块以 100% 的宽度和高度工作。它仅在我以像素为单位设置 w 和 h 时才有效。 这是网站的头部标签：

$gantry->addScript(array(
                'tooltips.js',
                'jquery.preloader.js',
                'touch.gallery.js',
                'jquery.isotope.min.js',
                'scripts.js'
            ));
        ?>

        <script type="text/javascript">
            jQuery(document).ready(function($) {
                /*Image Preloader*/
                $("span.catItemImage, span.itemImage, span.userItemImage, span.genericItemImage").preloader({
                    iconURL:"<?php echo $gpath.'/images/system/loading.gif' ;?>"
                });
            });
        </script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="templates/theme1514/js/jssor.slider.mini.js"></script>

        <script>
                $(document).ready(function ($) {
                                var options = {
                                $AutoPlay: true,
                            $DragOrientation: 1,                               
                            $SlideDuration: 600,                                

                            $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                                $ChanceToShow: 1,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                                $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                                $Steps: 1,                                       //[Optional] Steps to go for each navigation request, default value is 1
                                $Scale: false
                            }
                        };
                    var jssor_slider1 = new $JssorSlider$('rt-slider', options);



                });
        </script>

这里是滑块 div：

<?php if ($class=="homepage") :?>
<div id="rt-slider" style="overflow:hidden; width:"100%"; height:"100%";">
<div u="slides" style="cursor: move; position: absolute; left:0px; top:0px; overflow: hidden;">
<div><img u="image" src="templates/theme1514/images/image1.jpg" /></div>
<div><img u="image" src="templates/theme1514/images/image2.jpg" /></div>
<div><img u="image" src="templates/theme1514/images/image3.jpg" /></div>

</div>

<!-- Arrow Navigator Skin Begin -->
<style>
/* jssor slider arrow navigator skin 14 css */
/*
.jssora14l              (normal)
.jssora14r              (normal)
.jssora14l:hover        (normal mouseover)
.jssora14r:hover        (normal mouseover)
.jssora14ldn            (mousedown)
.jssora14rdn            (mousedown)
*/
.jssora14l, .jssora14r, .jssora14ldn, .jssora14rdn
{
position: absolute;
cursor: pointer;
display: block;
background: url(templates/theme1514/images/a14.png) no-repeat;
overflow:hidden;
}
.jssora14l { background-position: -15px -35px; }
.jssora14r { background-position: -75px -35px; }
.jssora14l:hover { background-position: -135px -35px; }
.jssora14r:hover { background-position: -195px -35px; }
.jssora14ldn { background-position: -255px -35px; }
.jssora14rdn { background-position: -315px -35px; }
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora14l" style="width: 30px; height: 50px; top: 123px; left: 0px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora14r" style="width: 30px; height: 50px; top: 123px; right: 0px">
</span>
<!-- Arrow Navigator Skin End -->

</div>
<div class="clear"></div>
<?php endif; ?>

现在已经研究了大约 5 个小时并寻找答案。我是否错过了摆在我面前的非常大的东西？ 网站：www.xabre.net/tempbw

Answer 1

jssor 滑块的大小应始终以像素为单位。 但是您可以通过实例将滑块缩放到任意大小。$ScaleWidth

<script>
    $(document).ready(function ($) {


        var options = {
            $AutoPlay: true,
            $DragOrientation: 1,                               
            $SlideDuration: 600,                                

            $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 1,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Steps: 1,                                       //[Optional] Steps to go for each navigation request, default value is 1
                $Scale: false
            }
        };
        var jssor_slider1 = new $JssorSlider$('rt-slider', 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();

        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end

    });
</script>

参考 'jssor.slider.fullpack\demos-jquery\full-width-slider.source.html'