Question

我喜欢http://jqueryfordesigners.com/slider-gallery/上的Slider Gallery，但不幸的是，在我更新了jquery + jqueryUI后它停止了工作。任何想法，如何改进代码[或类似的教程/脚本]，让它恢复工作？ javascript看起来像这样：

window.onload = function () {
        var container = $('div.sliderGallery');
        var ul = $('ul', container);

        var itemsWidth = ul.innerWidth() - container.outerWidth();

        $('.slider', container).slider({
            min: 0,
            max: itemsWidth,
            handle: '.handle',
            stop: function (event, ui) {
                ul.animate({'left' : ui.value * -1}, 500);
            },
            slide: function (event, ui) {
                ul.css('left', ui.value * -1);
            }
        });
    };

HTML / CSS非常简单;一个容器（div.SliderGallery），隐藏溢出和100％宽度，一个ul里面的内容和一个div中的滚动条。使用旧的jQuery-Version（1.3或者其他版本）可以正常工作，但对V1.5没有任何作用。

非常感谢，

祝你好运

卢卡斯

Answer 1

我遇到完全相同的问题 - 在主asp.net页面上调用最新版本的jQuery，我需要在带滑块的页面中包含jQuery 1.2.6 ...有很多关于使用noConflict（）的帖子;参数w /这个完全相同的代码。无论如何，这就是我所做的：

<script type="text/javascript" src="includes/js/jquery.nyroModal.js"></script>//This was my conflicting code - lightboxes weren't working any more with the slider implemented
<script src="includes/js/slider.js" type="text/javascript"></script>//This is jQuery 1.2.6 that I renamed for organizational purposes
<script src="includes/js/jquery-ui-full-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>//Here's the UI that the slider requires
<script type="text/javascript">
var jqSlider = $.noConflict(true);//You MUST use the noConflict method directly after loading the preferred library
    jqSlider(function(){ // Replace all $ as follows
        var container = jqSlider('div.sliderGallery');
        var ul = jqSlider('ul', container);
        var itemsWidth = ul.innerWidth() - container.outerWidth();
        jqSlider('.slider', container).slider({
            min: 0,
            max: 5800,
            handle: '.handle',
            stop: function (event, ui) {
                ul.animate({'left' : ui.value * -1}, 500, 'linear');
            },
            slide: function (event, ui) {
                ul.css('left', ui.value * -1);
            }
        });
    });
</script>// After this the rest of my functions follow, using the normal $ and jQuery 1.5

现在适合我 - 棘手的部分是正确安排脚本调用和你的功能。希望这会有所帮助。

Answer 2

虽然collins解决方案工作正常，但我还在寻找另一种方法，以便在最终文档中只使用一个库。最后，我找到了一个适用于jQuery5和UI1.8.9的解决方案，当然我很乐意将它分享给任何有用它的人：

HTML-Markup：

<div id="gallery">
   <div id="content">Content to slide goes here</div>
</div>

<div id="scrollbar">
   <div id="slider"></div>
</div>

CSS看起来像这样：

.gallery {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;}

 .content {
    position: relative;
    overflow: none;
    white-space: nowrap;
    padding: 0;
    margin: 0;}

.ui-slider {position: relative; width:464px; margin-left:40px;}  
.ui-slider .ui-slider-handle {
        margin-top:2px;
        background-color: #999; 
        position: absolute; 
        width:80px; 
        height:8px; 
        left:0px;}  

.scrollBar {
        position: relative; 
        background-color: #CCC; 
        width:544px; 
        height:12px; 
        margin-left:53px;
        }   

.ui-slider-horizontal {}
.ui-slider-horizontal .ui-slider-handle {margin-left: -40px;} 
.container a:active, .container a:visited, .container a:focus {top:0; left:0;}

最后重要的部分是jQuery-Stuff：

var maxScroll = 2605 - $("body").width();
var scrollable = $("#content");
$("#slider").slider({
    max: maxScroll,
    slide: function (e, ui) {
        scrollable.css("left", "-" + ui.value + "px")
    }
});

2605是＃content-div的宽度。也许这有助于其他任何人......

在更新到jQuery 1.5之后，jQuery Slider Gallery（带有Scrollbar的滑块）停止工作

2 个答案: