Как сделать резиновый слайдер Jquery?

Question

[mebelandra]

CSS:

body {
	background: #eee;
	margin: 0;
	font-family: arial;
	background-color: #FFF;
	}
	.wrapper {
		background: #fff;
		width: 840px;
		padding: 1px 15px 15px;
		margin: 0 auto; 
	}
	.slider {
		z-index: 9;
		width: 840px;
		height: 348px;
		overflow: hidden;
		margin: 0 0 7px;
		position: relative;
	}
	.slider ul,
	.slider li {
		padding: 0;
		margin: 0;
		list-style-type: none;
	}
	.slider ul {
		width: 9999px; 
	}
	.slider ul li {
		list-style-type: none;
		float: left;
		width: 840px;
		height: 348px;
	}
	.slider .nav {
		position: absolute;
		left: 15px;
		bottom: 12px; 
	}
	.slider .nav span {
		opacity: 0.9;
		background: #fff;
		margin: 0 8px 0 0;
		width: 16px;
		height: 16px;
		border-radius: 8px;
		cursor: pointer;
		overflow: hidden;
		display: block;
		float: left;
		box-shadow: 0 1px 2px #000;
	}
	.slider .nav span.on {
		background: #FF0033;
	}

JS:

$(document).ready(function()
	{
		$(".slider").each(function ()
		{
			var obj = $(this);
			$(obj).append("<div class='nav'></div>");

			$(obj).find("li").each(function ()
			{
				$(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>");
				$(this).addClass("slider"+$(this).index());
			});

			$(obj).find("span").first().addClass("on");
		});
	});

	function sliderJS (obj, sl) // slider function
	{
		var ul = $(sl).find("ul");
		var bl = $(sl).find("li.slider"+obj);
		var step = $(bl).width();
		$(ul).animate({marginLeft: "-"+step*obj}, 500);
	}

	$(document).on("click", ".slider .nav span", function() // slider click navigate
	{
		var sl = $(this).closest(".slider");
		$(sl).find("span").removeClass("on");
		$(this).addClass("on");
		var obj = $(this).attr("rel");
		sliderJS(obj, sl);
		return false;
	});

HTML:

<ul>
			<li><img src="1.jpg" alt="" /></li>
			<li><img src="2.jpg" alt="" /></li>
			<li><img src="3.jpg" alt="" /></li>
			<li><img src="4.jpg" alt="" /></li>
			<li><img src="5.jpg" alt="" /></li>
		</ul>

Comments

[Игорь Воротнёв]

Вы же везде ширину жестко в пикселях прописываете, о какой резиновости речь?

Answer 1

[Ольга Стогова]

А по какому значению он должен менять ширину? У ваc фиксированный

.wrapper {
	width: 840px;
  }

Для начала сделайте нефиксированную ширину страницы и тогда, например, если слайдер должен расстягиваться по ширине контента, можно сделать примерно так

$(window).resize(function(){
    var clientWidth = document.body.clientWidth;
   $('ul li').width(clientWidth);
});

начальную ширину выставить по ширине контента