Верстка адаптивного слайдера

[SuperJerk]

Всем привет.

Сабж: хочу сверстать адаптивный слайдер. Для макета использую сетку от бутстрапа. Сначала задавал диву с классом slider-container ширину около 3000px, а Slider-holder'у overflow: hidden, в общем стандартная разметка для слайдера. Но поскольку слайдер должен быть адаптивным, то и ширина у него и у его дочерних элементов в процентах -> растягивались эти проценты на все 3000px. В итоге всё выглядело не так, как нужно.

Решил сделать по-другому: <li> задал absolute, а ul.slider-container relative, чтобы показывать слайды с помощью изменения прозрачности. Но теперь <li> с absolute'ом "не видят" свой контент(пикча и текст) и чтобы увидеть слайды, нужно задавать ul.slider-container relative фиксированную высоту, что, опять же, неприемлимо. Помнится, где-то видел решение такой фигни с помощью js, прошу ткнуть меня носом, если таковое имеется

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

<div class="container">

<div class="row-fluid">
	 <div class="span12">
		 <div class="slider-holder">
			 <ul class="slider-container">
				 <li>
					 <div class="slider-image">
						 <img src="img/slide.png" alt="pic">
					 </div> <!--end slider-image -->
					 <div class="slider-content">
						 <p>
							 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, deleniti quae nihil corrupti consequatur aut commodi placeat nam facere sed voluptatibus amet sunt in nulla quisquam nesciunt earum repellat officia.
						 </p>
					 </div> <!-- end slider-content -->
				 </li>
				 <li>
					 <div class="slider-image">
						 <img src="img/slide.png" alt="pic">
					 </div> <!--end slider-image -->
					 <div class="slider-content">
						 <p>
							 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, deleniti quae nihil corrupti consequatur aut commodi placeat nam facere sed voluptatibus amet sunt in nulla quisquam nesciunt earum repellat officia.
						 </p>
					 </div> <!-- end slider-content -->
				 </li>

				 <li>
					 <div class="slider-image">
						 <img src="img/slide.png" alt="pic">
					 </div> <!--end slider-image -->
					 <div class="slider-content">
						 <p>
							 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, deleniti quae nihil corrupti consequatur aut commodi placeat nam facere sed voluptatibus amet sunt in nulla quisquam nesciunt earum repellat officia.
						 </p>
					 </div> <!-- end slider-content -->
				 </li>

	 <li>
					 <div class="slider-image">
						 <img src="img/slide.png" alt="pic">
					 </div> <!--end slider-image -->
					 <div class="slider-content">
						 <p>
							 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, deleniti quae nihil corrupti consequatur aut commodi placeat nam facere sed voluptatibus amet sunt in nulla quisquam nesciunt earum repellat officia.
						 </p>
					 </div> <!-- end slider-content -->
				 </li>

	 </ul> <!-- end slider-container
	 </div> <!-- end slider-holder
</div> <!-- end span12 -->
</div> <!-- end row -->
</div> <!-- end container -->

Edited April 2, 2013 by SuperJerk

[npofopr]

Мудрите вы что то.

Почему бы не взять просто готовые решения или любые другие?

[SuperJerk]

Мудрите вы что то.

Почему бы не взять просто готовые решения или любые другие?

Хочется именно свой велосипед. Тем более пока не находил адаптивного слайдера, который вмещал в себя пикчу и какой-нибудь текстовый контент (title у <img> не считается).