Я не знаю зачем там нужны дополнительные скрипты, наверное для каких то эффектов. Вот что выходит у меня:
<div id="testFrame">
<ul class="slidee">
<li><img src="http://lorempixel.com/400/200/sports/1/" /></li>
<li><img src="http://lorempixel.com/400/200/sports/2/" /></li>
<li><img src="http://lorempixel.com/400/200/sports/3/" /></li>
<li><img src="http://lorempixel.com/400/200/sports/4/" /></li>
<li><img src="http://lorempixel.com/400/200/sports/5/" /></li>
</ul>
<div id="forw"> -> </div>
<div id="back"> <- </div>
</div>
<div id="show">show</div>
СSS:
#testFrame{
width: 600px;
display: none;
}
#testFrame ul li img {
width: 200px;
float: left;
}
var sly12 = new Sly('#testFrame', {
horizontal: true, // Switch to horizontal mode.
// Item based navigation
itemNav: 'centered', // Item navigation type. Can be: 'basic', 'centered', 'forceCentered'.
itemSelector: null, // Select only items that match this selector.
smart: true, // Repositions the activated item to help with further navigation.
activateOn: 'click', // Activate an item on this event. Can be: 'click', 'mouseenter', ...
activateMiddle: true, // Always activate the item in the middle of the FRAME. forceCentered only.
// Scrolling
scrollSource: null, // Element for catching the mouse wheel scrolling. Default is FRAME.
scrollBy: 10, // Pixels or items to move per one mouse scroll. 0 to disable scrolling.
// Dragging
dragSource: null, // Selector or DOM element for catching dragging events. Default is FRAME.
mouseDragging: true , // Enable navigation by dragging the SLIDEE with mouse cursor.
touchDragging: true, // Enable navigation by dragging the SLIDEE with touch events.
releaseSwing: true, // Ease out on dragging swing release.
swingSpeed: 0.1, // Swing synchronization speed, where: 1 = instant, 0 = infinite.
elasticBounds: true, // Stretch SLIDEE position limits when dragging past FRAME boundaries.
// Scrollbar
scrollBar: null, // Selector or DOM element for scrollbar container.
dragHandle: true, // Whether the scrollbar handle should be draggable.
dynamicHandle: true, // Scrollbar handle represents the ratio between hidden and visible content.
minHandleSize: 50, // Minimal height or width (depends on sly direction) of a handle in pixels.
clickBar: true, // Enable navigation by clicking on scrollbar.
syncSpeed: 0.5, // Handle => SLIDEE synchronization speed, where: 1 = instant, 0 = infinite.
// Pagesbar
pagesBar: null, // Selector or DOM element for pages bar container.
activatePageOn: null, // Event used to activate page. Can be: click, mouseenter, ...
pageBuilder: // Page item generator.
function (index) {
return '<li>' + (index + 1) + '</li>';
},
// Navigation buttons
forward: 'div#forw', // Selector or DOM element for "forward movement" button.
backward: 'div#back', // Selector or DOM element for "backward movement" button.
prev: 'div#prev', // Selector or DOM element for "previous item" button.
next: 'div#next', // Selector or DOM element for "next item" button.
prevPage: null, // Selector or DOM element for "previous page" button.
nextPage: null, // Selector or DOM element for "next page" button.
// Automated cycling
cycleBy: 'items', // Enable automatic cycling by 'items' or 'pages'.
cycleInterval: 1500, // Delay between cycles in milliseconds.
pauseOnHover: true, // Pause cycling when mouse hovers over the FRAME.
startPaused: 0, // Whether to start in paused sate.
// Mixed options
moveBy: 300, // Speed in pixels per second used by forward and backward buttons.
speed: 300, // Animations speed in milliseconds. 0 to disable animations.
easing: 'swing', // Easing for duration based (tweening) animations.
startAt: 0, // Starting offset in pixels or items.
keyboardNavBy: null, // Enable keyboard navigation by 'items' or 'pages'.
// Classes
draggedClass: 'dragged', // Class for dragged elements (like SLIDEE or scrollbar handle).
activeClass: 'active', // Class for active items and pages.
disabledClass: 'disabled' // Class for disabled navigation elements.
});
$('#show').click(function(){
$('#testFrame').css('display', 'block');
sly12.init()
});
Конечно настройки никакие, но я и не стал вдаваться. Но вроде работает на JQuery.js и Sly.js. Я не понимает зачем тебе его грузить слайдер аяксом?
