Сначала об общих моментах, разметка по большей части на ваше усмотрение, а я использовал такую, как по мне достаточно семантично и главное ничего лишнего. Внутрь li-шек помещается контент который надо каруселить, например картинки.

<div id="slider" class="c">
	<a class="ib arrow left" href="#"></a>
	<ul class="ib">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<a class="ib arrow right" href="#"></a>
</div>

CSS на самом деле еще больше на ваше усмотрение, главные моменты тут такие

li { display:none; } /* все слайды скрыты*/
.c {} /*просто контейнер*/
.ib { display:inline-block; } /*можно еще хаки для ie*/
.arrow { background:url("") no-repeat; } /*картинка со стрелочками*/
.arrow.left { background-position: 0 0; } /*ну вы поняли*/
.arrow.right { background-position: 0 0; }
.active { display:inline-block; } /*текущий элемент карусели*/

А вот и сладенькое, первый скрипт показывает только одну li-шку за раз и при достижении крайней точки начинает с противоположного конца

$(".arrow", "#slider").click(function(){

	var self = $(this),
		direction = self.is(".left") ? -1 : 1,
		collection = self.parent().find("li"),
		index = collection.filter(".active").removeClass("active").index(),
		next = (collection.length + index + direction) % collection.length;
		
	collection.eq(next).addClass("active");

	return false;

}).eq(1).trigger("click");

А второй показывает количество определенное в переменной number и при достижении крайней точки останавливаеться.

$(".arrow", "#slider").click(function(){
	
	var self = $(this),
		direction = self.is(".left") ? -1 : 1,
		collection = self.parent().find("li"),
		index = collection.filter(".active:first").index(),
		number = 5;
		
	index = Math.max(0, Math.min(index + direction, collection.length - number));
				
	collection.removeClass("active").filter(function(){
		var self = $(this);
		return self.index() >= index && self.index() < index + number;
	}).addClass("active");
	
	return false;

}).eq(1).trigger("click");

Зачему еще что обе карусели сами инициализируються, тоесть зарание выставлять класс active не надо.

Но шутки комикам, а я сегодня буду писать о шрифтах, а точнее об их подключении на страницу. Для начала возьмем какой-нибудь бесплатный шрифт, например Marke Eigenbau. Это реальный восьмипиксельный шрифт, не смотря на название, и дальше я буду использовать его как пример.

Еще забыл оговориться, эта статья не касается sIFR, typeFace и cufon. Так что по ссылочкам сами походите, а я пока расскажу про нативный @font-face.

Теория простая - пишем в CSS правило:

@font-face {
	font-family: 'MarkeEigenbau';
	src: url('../fonts/MarkeEigenbau/MarkeEigenbau.ttf') format('truetype');
}

Все бы хорошо, но у нас есть целый зоопарк браузеров, форматов и лицензий поэтому все-всех, а страдаем мы. После консультации у Гугла выясняется, что достаточно все 4 формата чтобы все были довольны ttf, eot, woff, svg. Правим CSS, но не забываем что сотрудники компании MS каждый день усердно работают над тем чтобы нам было тяжелее работать.

@font-face {
	font-family: 'MarkeEigenbau';
	src: url('MarkeEigenbau.eot?#iefix') format('embedded-opentype'),
		url('MarkeEigenbau.woff') format('woff'),
		url('MarkeEigenbau.ttf') format('truetype'),
		url('MarkeEigenbau.svg#MarkeEigenbau') format('svg');
}

Для пытливых: Похоже IE разбирает параметр src регуляркой c включенным квантификатором жадности и этот # обрывает паттерн.

Ой забыл что у нас нет всех этих файлов, тогда их можно нагенерить например белкой или фонт конвертером, но белка мне больше нравиться, потому что она еще и генерит CSS.

Для пытливых: Раньше белка вставляла в хеш после svg какую-то ересь типа webfontiGyDMQZD, но сейчас её попустило и она правильно вставляет туда имя шрифта.

Итак, на руках 4 файла и куча радости, но мы ж хотим не просто шрифт, а хотим жир, курсив, и жирный курсив, и чтоб удобно! Для начала скачиваем все это хозяйство и конвертим. Если вы используете белку то на выходе у вас 16 файлов шрифта и 16 правил для @font-face

@font-face {
	font-family: 'MarkeEigenbauBold';
	src: url('MarkeEigenbauBold.eot?#iefix') format('embedded-opentype'),
		url('MarkeEigenbauBold.woff') format('woff'),
		url('MarkeEigenbauBold.ttf') format('truetype'),
		url('MarkeEigenbauBold.svg#MarkeEigenbauBold') format('svg');
	font-weight: normal;
	font-style: normal;
}

Я считаю это перебор, тем более не удобно каждый раз как нужен курсив использовать конструкцию с полным перечислением шрифтов.

.markerEigenbauBold {
	font-family: 'MarkeEigenbauItalic' /*, [fallback]*/, sans-serif;
	font-style: italic;
}

и все только потому что так нагенерила белка, поэтому правим

@font-face {
	font-family: 'MarkeEigenbau';
	src: url('MarkeEigenbauBoldItalic.eot?#iefix') format('embedded-opentype'),
		url('MarkeEigenbauBoldItalic.woff') format('woff'),
		url('MarkeEigenbauBoldItalic.ttf') format('truetype'),
		url('MarkeEigenbauBoldItalic.svg#MarkeEigenbauBoldItalic') format('svg');
	font-weight: bold;
	font-style: italic;
}

Дышать явно стало проще потому что правил осталось 4 и они теперь не напрягают. Но что делать если вы вдруг захотели осчастливить пользователей Mac шрифтом Calibri, вам ведь не надо заставлять пользователей седьмой винды и висты качать его, поэтому добавляем еще локальное имя шрифта.

@font-face {
	font-family: 'Calibri';
	src: local('Calibri Bold Italic'),
		url('CalibriBoldItalic.eot#iefix') format('embedded-opentype'),
		url('CalibriBoldItalic.woff') format('woff'),
		url('CalibriBoldItalic.ttf') format('truetype'),
		url('CalibriBoldItalic.svg#CalibriBoldItalic') format('svg');
	font-weight: bold;
	font-style: italic;
}

Ну вот почти все, осталась маленькая деталь, а что если ваш сайт надежно защищен SSL, вы думаете это будет работать? Правильно, надо еще пошаманить с .htaccess, который достаточно положить в директорю со шрифтами.

<IfModule mod_headers.c>
	Header set Access-Control-Allow-Origin "*"
</IfModule>

А раз полезли в .htaccess то добавляем правильные mine-type

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-woff .woff
AddType image/svg+xml .svg
AddType application/octet-stream .afm

Вот вроде и все... А вывод такой: используйте Helvetica, не бодрите мозги :)

Как обычно примера из официального мануала мне не достаточно поэтому начал хачить. Собственно то что мне надо было находиться в низу страницы, а как я его делал я расскажу сейчас.

Основная идея примера из мануала: чтобы на одной и той же разметке можно было сделать табики и сверху и снизу. Это очень хорошая идея но мне явно не подходила. Вкратце табики выглядят так: общий контейнер, в нем сверху UL с закладками, снизу - DIV с контентом. Это верно как для разметки так и для отображения. Для табиков снизу разметка та же, но табики имеют position:absolute и bottom:0 . Казалось бы все должно работать, НО есть одно НО, и это не IE! Это как не странно WebKit. Все размерности в JQuery UI указаны в EM, что бы все одинаково хорошо смотрелось с любым размером текста, так вот при переходе из EM (да в общем и из остальных относительных величин) в PX, WebKit округляет числа в большую сторону, тогда как все остальные в меньшую, или подгоняют. Об этом еще Resig писал в далеком 2008 году. При таком подходе прижатые к низу табики налазят на текст на 1-2PX. Это совершенно не волнует пример в мануале, потому что текст там не имеет бордера и заранее короче на несколько пикселей, так что между ним и прижатыми табами есть зазор. Ради красоты пришлось пожертвовать первоначальной разметкой, перенеся табики под текст. Хотя по моему вообще это не принципиально, потому что я сделал это скриптом, да и вернуть их тоже не проблема.

Вторая проблема это !important. ежупанятна что универсальность в таком большом CSS framework требует перекрывать что-то, что было написано позже, тем что было написано раньше. Тут кроется проблема всего framework. Я свято уверен что классы типа ui-state-[default|hover|active] не должны определять толщину и тип бордера, а только цвет, потому что потом надо городить огороды. В своем маленьком примере я это поправил.

Ну и последние, надо открывать таб по урлу. Как бы самое обычное дело, но предусмотрено в документации только через куки, а если руками указывать то надо знать индекс таба а не скажем его ID. С этой маленькой гадкой проблемой я тоже очень элегантно справился двумя строками кода.

KISS

Решил что для этого как нельзя лучше подойдет YUI-grids, но в данном примере я его удалил, хотя для того чтобы его вернуть достаточно посмотреть каменты в коде и все станет ясно.

Как вы понимаете в осле вся красота от border-radius (тут классы от jquery UI) и box-shadow недоступна, поэтому graceful degradation. Хотя при большом желании на таблицу ложатся круглые углы от rocon

Работает библиотека крайне хорошо, даже слишком хорошо. Это и будем править. Суть дела в том что в девятой версии осел все-таки научился поддерживать круглые углы, а в rocon'e на версию проверки нет и он продолжает рисовать свои. Вот это и исправляем, добавляя в строку 1052.

if (browser.msie && /(msie) ([\w.]+)/i.exec(navigator.userAgent)[2] < 9) {

Хотя статья совсем не об этом. Статья для тех кто как и я страдает математическим кретинизмом и не может быстро посчитать что больше 3/5 и 7/12. Поэтому я тут рисую эту табличку чтобы всегда быстро подсматривать

И еще небольшой калькулятор, некоторые значения в котором не работают.

Так вот есть у этого плагина большой недостаток - он однострочный и все похожие плагины тоже, тоесть если у меня менюшка в две строки то хрен мне. Надо было срочно исправить недоразумение и я написал свой.

• Один
• Два
• Три
• Четыре
• Пять
• Шесть
• Семь

Код такой

<ul id="lavalamp" class="ui-corner-all">
<li style="top:60px;left:20px" class="active"><span class="text">Один</span></span></li>
<li style="top:40px;left:150px"><span class="text">Два</span></li>
<li style="top:10px;left:50px"><span class="text">Три</span></li>
<li style="top:60px;left:100px"><span class="text">Четыре</span></li>
<li style="top:120px;left:10px"><span class="text">Пять</span></li>
<li style="top:10px;left:150px"><span class="text">Шесть</span></li>
<li style="top:100px;left:100px"><span class="text">Семь</span></li>
</ul>
<div id="lava" class="ui-corner-all"></div>

#lavalamp {
	display: block;
	height: 150px;
	border: 5px solid #FF7F04;
	background: #ff7f04; /* old browsers */
	background: -moz-linear-gradient(top, #ff7f04 0%, #ffb76b 99%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7f04), color-stop(99%,#ffb76b)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7f04', endColorstr='#ffb76b',GradientType=0 ); /* ie */
}

    #lavalamp li {
		color: #808080;
		cursor: pointer;
		display: block;
		float: left;
		height: 25px;
		position: relative;
		z-index: auto;
		padding: 0;
    }

        #lavalamp li span {
			display: block;
			font-size: 14px;
			font-weight: bold;
			line-height: 25px;
			position: relative;
			text-decoration: none;
			z-index: 200;
			padding: 0 5px;
        }

#lava {
	background-color: #e57807;
	position:absolute;
	left:0;
	top:0;
	height:0;
	width:0;
	z-index:100;
}

Градиент сделан при помощи тулзы Ultimate CSS Gradient Generator

jQuery(document).ready(function($){
	$("#lavalamp")
		.delegate("li","mouseenter",null,function(){
			var self = $(this);
			$("#lava").stop().animate({
				top : self.offset().top,
				left : self.offset().left,
				width : self.outerWidth(true),
				height : self.outerHeight(true)
			})
		})
		.delegate("li","click",null,function(){
			alert($(this).text());
		})
		.bind("mouseleave",null,function(){
			$(".active",this).eq(0).trigger("mouseover");
		})
		.trigger("mouseout");
});

]]> http://mabp.kiev.ua/2010/11/27/lavalamp/feed/ 1