我正在将drupal 6网站升级到drupal 7，随之而来的是Jquery的新版本。我有一个带有一些boxshots的slidegallery你可以横向浏览，在新网站上你仍然可以滚动浏览内容但手柄不会移动。
任何想法为什么滑块仍然有效但手柄本身不再存在？
我也尝试了JqueryUi.com处的滑块，但是那个滑块甚至没有出现......
初始版本基于this slidergallery，但由于Jquery更新，该版本不能再使用了。
css：
/* slider specific CSS */
body.page-node-483 .sliderGallery {
background: url(/sites/all/themes/fourpees2011/css/images/productbrowser-background3.png) no-repeat;
overflow: hidden;
position: relative;
padding: 10px;
height: 200px;
width: 960px;
}
body.page-node-483 .sliderGallery ul {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
body.page-node-483 .sliderGallery ul li {
display: inline;
margin-right: 30px;
}
body.page-node-483 .sliderGallery ul li.first {
margin-left: 20px;
}
body.page-node-483 .slider {
width: 950px;
height: 19px;
margin-top: 160px;
margin-left: 5px;
padding: 1px;
position: relative;
background: url(/sites/all/themes/fourpees2011/css/images/productbrowser-scrollbar2.png) no-repeat;
}
body.page-node-483 .handle {
position: absolute;
cursor: move;
height: 19px;
width: 187px;
top: 0;
background: url(/sites/all/themes/fourpees2011/css/images/productbrowser-scroller2.png) no-repeat;
z-index: 100;
}
body.page-node-483 .slider span {
color: #bbb;
font-size: 80%;
cursor: pointer;
position: absolute;
z-index: 110;
top: 3px;
}
剧本：
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" charset="utf-8">
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);
}
});
};
</script>
和HTML：
<div class="sliderGallery">
<ul>
<li><a href="/products/atomyx/atomyx-portal"<li><img src="/sites/default/files/products/boxshots/small/boxshot_Atomyx-Portal_LEFT_LR.png"></li></a>
<li><a href="/products/axaio-software/madetoprint"<li><img src="/sites/default/files/products/boxshots/small/MadeToPrint_0.png"></li></a>
<li><a href="/products/axaio-software/madetocompare"<li><img src="/sites/default/files/products/boxshots/small/MadeToCompare_0.png"></li></a>
<li><a href="/products/axaio-software/madeforlayers"<li><img src="/sites/default/files/products/boxshots/small/MadeForLayers.png"></li></a>
<li><a href="/products/callas-software/pdftoolbox"<li><img src="/sites/default/files/products/boxshots/small/pdfToolbox_0.png"></li></a>
<li><a href="/products/callas-software/pdftoolbox-server"<li><img src="/sites/default/files/products/boxshots/small/pdfToolboxServer_0.png"></li></a>
<li><a href="/products/callas-software/pdfapilot"<li><img src="/sites/default/files/products/boxshots/small/pdfaPilot_0.png"></li></a>
<li><a href="/products/callas-software/pdfapilot-server"<li><img src="/sites/default/files/products/boxshots/small/pdfaPilotServer_0.png"></li></a>
<li><a href="/products/ctrlpublishing/ctrlchanges"<li><img src="/sites/default/files/products/boxshots/small/CtrlChanges.png"></li></a>
<li><a href="/products/ctrlpublishing/ctrllayers"<li><img src="/sites/default/files/products/boxshots/small/CtrlLayers.png"></li></a>
<li><a href="/products/ctrlpublishing/ctrlcrosstalkid"<li><img src="/sites/default/files/products/boxshots/small/CtrlCrossTalkID.png"></li></a>
<li><a href="/products/ctrlpublishing/ctrlcrosstalk"<li><img src="/sites/default/files/products/boxshots/small/CtrlCrossTalk.png"></li></a>
<li><a href="/products/elpical/claro-premedia"<li><img src="/sites/default/files/products/boxshots/small/ClaroPremedia.png"></li></a>
<li><a href="/products/elpical/claro-single"<li><img src="/sites/default/files/products/boxshots/small/ClaroSingle.png"></li></a>
<li><a href="/products/printfactory/printfactory"<li><img src="/sites/default/files/products/boxshots/small/PrintFactory_0.png"></li></a>
<li><a href="/products/printfactory/printfactory-go"<li><img src="/sites/default/files/products/boxshots/small/PrintFactory_Go_Boxshot_0.png"></li></a>
<li><a href="/products/proofmaster/proofmaster-plus"<li><img src="/sites/default/files/products/boxshots/small/ProofMasterPlus.png"></li></a>
<li><a href="/products/proofmaster/proofmaster-certify"<li><img src="/sites/default/files/products/boxshots/small/ProofMasterCertify.png"></li></a>
<li><a href="/products/proofmaster/proofmaster-media"<li><img src="/sites/default/files/products/boxshots/small/ProofMasterMedia.png"></li></a>
<li><a href="/products/remote-director/remote-director"<li><img src="/sites/default/files/products/boxshots/small/Remote-director.png"></li></a>
<li><a href="/products/remote-director/press-director"<li><img src="/sites/default/files/products/boxshots/small/Press-director.png"></li></a>
<li><a href="/products/twixl-media/twixl-publisher"<li><img src="/sites/default/files/products/boxshots/small/Twixl-boxshot.png"></li></a>
<li><a href="/products/twixl-media/twixl-publisher-enterprise-kiosk"<li><img src="/sites/default/files/products/boxshots/small/Twixl-Enterprise-Kiosk-boxshot.png"></li></a>
</ul>
<div class="slider">
<div class="handle"></div>
</div>
</div>
整个是JSfiddle：http://jsfiddle.net/vTr5c/2/
答案 0 :(得分：0)
从jquery-1.7.1.min.js迁移到jquery-1.9.1.min.jss时，我遇到了类似的“滑块句柄无法移动”问题。在我身边，经过测试，这是肯定的 - 由于这个文件的变化。 Jquery中的一些语法可能会从1.7.1更改为1.9.1。我无法让你的代码/滑块显示在JSfiddle上。 jsfiddle.net/vTr5c/2 /