www.kutsevalov.name Download
jQuery.SimSlider 1.2.0
   
1 2 3  
Безболезненная интеграция
Никакого автоматически генерируемого html кода, только ваша верстка и ваши стили.
Все выглядит только так, как Вам нужно.
<div class="sliderWrap">
 <a href="#" class="ss-prev"> </a>
 <a href="#" class="ss-next"> </a>
 <div class="dots">
    <a href="#sl-0" class="ss-dot dot-1">1</a>
    <a href="#sl-1" class="ss-dot dot-2">2</a>
 </div>
 <div class="SimSlider"
		style="overflow:hidden;width:400px;height:200px;">
    <div class="ss-item sl-0"
		style="position:absolute;width:400px;height:200px;">
			<!-- контент слайда -->
    </div>
    <div class="ss-item sl-1"
		style="position:absolute;width:400px;height:200px;">
			<!-- контент слайда -->
    </div>
    <!-- ... другие слайды -->
 </div>
</div>
						
Всего три условия

1. У слайдера должна быть обертка, внутри которой распологаются кнопки управления

2. Слайды должны распологаться внутри overflow:hidden контейнера и иметь position:absolute

3. Кнопки переключения слайдов (кроме next/prev) должны в аттрибуте href содержать номер включаемого слайда (href="#sl-0")

Маленький код
Ну или не очень маленький, но надеюсь понятный.
Предельно простой
Для смены слайдов используется обычный jQuery.animate.

Как использовать?

Например, у нас такая структура слайдера:

<div class="sliderBox">
	<a href="#" class="prevBtn"> </a>
	<a href="#" class="nextBtn"> </a>
	<div class="SimSlider">
		<div class="slide">
			<!-- контент первого слайда -->
		</div>
		<div class="slide">
			<!-- контент второго слайда -->
		</div>
		<div class="slide">
			<!-- контент третьего слайда -->
		</div>
		<div class="slide">
			<!-- и так далее -->
		</div>
	</div>
</div>

и стили

.sliderBox {
	position: absolute;
	height: 308px;
	width: 730px;
	top: 24px;
	left: 50px;
}
.sliderBox .prevBtn {
	position: absolute;
	top: 90px;
	left: -40px;
	height: 60px;
	width: 20px;
	text-decoration: none;
	background: url("slider-prev.png") left top no-repeat;
}
.sliderBox .nextBtn {
	position: absolute;
	top: 90px;
	right: -40px;
	height: 60px;
	width: 20px;
	text-decoration: none;
	background: url("slider-next.png") left top no-repeat;
}
.SimSlider {
	position: relative;
	overflow: hidden;
	height: 258px;
	width: 730px;
}
.SimSlider .slide {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 258px;
	width: 730px;
}

Тогда в блоке HEAD прописываем:

<script src="css_js/jquery.js"></script>
<script src="css_js/jquery.simslider.js"></script>
<script>
	jQuery( function($){
		$('.sliderBox').SimSlider( {
			next: '.nextBtn', // селектор стрелки вправо
			prev: '.prevBtn', // селектор стрелки влево
			item: '.SimSlider .slide', // селектор слайда
			speed: 1200, // скорость прокрутки
			delay: 5000 // задержка в мс
		} );
	} );
</script>

И слайдер должен заработать.

Помимо параметров, приведенных в примере, существует еще три callback события:

<script>
	jQuery( function($){
		$('.sliderBox').SimSlider( {
			'onAfterInit' : function( sliders, nextBtn, prevBtn, dots ){  }, // после инициализации слайдера
			'onBeginAnimate' : function( slider, status ){  }, // перед началом прокрутки слайда
			'onEndAnimate' : function( slider, status ){  } // после окончания прокрутки
			// ... прочие параметры
		} );
	} );
</script>

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

Чтобы отличить один слайд от другого, достаточно присвоить слайду уникальный класс. Например:

<script>
	jQuery( function($){
		$('.sliderBox').SimSlider( {
			'onEndAnimate' : function( slider, status ){
				if( $(slider).hasClass('sl-0') && status == 'visible' ){ // слайд отображен
					$(slider).find(".text").css("color","red"); // меняем цвет текста в первом слайде на красный
				}else if( $(slider).hasClass('sl-0') && status == 'hidden' ){ // слайд скрыт
					$(slider).find(".text").css("color","black"); // меняем цвет текста в первом слайде на черный
				}
			},
			// ... прочие параметры
		} );
	} );
</script>
...
<div class="SimSlider">
	<div class="slide sl-0">
		<p class="text">Текст слайда</p>
	</div>
	<div class="slide sl-1">
		<!-- контент второго слайда -->
	</div>
	...
</div>



В общем-то это все премудрости. По всем вопросам, отписывайтесь на этой странице.