Показать сообщение отдельно
  #23 (permalink)  
Старый 22.06.2013, 21:52
Профессор
Отправить личное сообщение для Faab Посмотреть профиль Найти все сообщения от Faab
 
Регистрация: 16.04.2012
Сообщений: 310

Я не знаю зачем там нужны дополнительные скрипты, наверное для каких то эффектов. Вот что выходит у меня:

<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. Я не понимает зачем тебе его грузить слайдер аяксом?
Ответить с цитированием