私はasp.netメニューコントロールを使用していますが、スライダーを追加する必要があるため、メニューコントロールが表示ページの外に大きくなると、これが制限され、jqueryスライダーを使用して他のオプションが非表示になります。Jcarousel を試してみましたが、これを正しく実装できました。2 つのことが起こります。
- アイテムが非表示になっていて、何をクリックしても表示されません。
- サブメニューが表示されなくなりました。
私が使用できるより良いプラグインへのヘルプまたはガイダンスは、本当に感謝しています。
<link href="css/jquery.thumbnailScroller.css" rel="stylesheet" />
<!-- Add jQuery library -->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<!-- jquery ui custom build (for animation easing) -->
<script src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script>
/* jQuery.noConflict() for using the plugin along with other libraries.
You can remove it if you won't use other libraries (e.g. prototype, scriptaculous etc.) or
if you include jQuery before other libraries in yourdocument's head tag.
[more info: http://docs.jquery.com/Using_jQuery_with_Other_Libraries] */
/* calling thumbnailScroller function with options as parameters */
(function ($) {
window.onload = function () {
$("#tS2").thumbnailScroller({
scrollerType: "clickButtons",
scrollerOrientation: "horizontal",
scrollSpeed: 2,
scrollEasing: "easeOutCirc",
scrollEasingAmount: 600,
acceleration: 4,
scrollSpeed: 800,
noScrollCenterSpace: 10,
autoScrolling: 0,
autoScrollingSpeed: 2000,
autoScrollingEasing: "easeInOutQuad",
autoScrollingDelay: 500
});
}
});
</script>
<!-- thumbnailScroller script -->
<script src="js/jquery.thumbnailScroller.js"></script>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<asp:Menu ID="navigation" runat="server" Orientation="Horizontal" CssClass="topmenu" MaximumDynamicDisplayLevels="20"
IncludeStyleBlock="false">
<DynamicSelectedStyle />
<DynamicMenuItemStyle />
<DynamicHoverStyle />
<DynamicMenuStyle />
<StaticMenuItemStyle />
<StaticSelectedStyle />
<StaticHoverStyle />
</asp:Menu>
</div>
</div>
<a href="#" class="jTscrollerPrevButton"></a>
<a href="#" class="jTscrollerNextButton"></a>
</div>