Не могу настроить слайдер

[nightgremlin]

Здравствуйте! 

 

Имеется вот такой слайдер:

/* Начало кода для слайдера */div.slider{	float:left;	margin:0 0 0 10%	}.viewport{    width: 30em;    height: 17em;    overflow: hidden;    position: relative;	}.slidewrapper{    position: absolute;    left:0;    top: 0;    height: 17em;    margin: 0;    padding: 0;    }.slide{    width: 30em;    height: 17em;    float: left;    list-style: none;    margin: 0;    padding: 0;    background: url(../image/Slider/ptichka.png) no-repeat;	background-size: cover;}.slide a{	display:block;	position:absolute;	bottom:0px;	height:80px;	background:#333333;	opacity:0.7;	width:100%;	color:#ffffff;	font:1.2em Arial, Helvetica, sans-serif;	text-decoration:none;}.slide a p{	width:50%;	padding:10px;}.second{     background: #00ff00;   }.third{     background: #0000ff;   }.four{     background: #0C9;   }.five{     background: #66F;   }.dot{    display: inline-block;    width: 14px;    height: 14px;	padding-left:2px;	background: url(../image/krugok.png) no-repeat;	background-size: contain;}.dot.active{    background: url(../image/activ-knopka.png) no-repeat;	   background-size: contain;}.toggles{	margin:10px 0 0 45%;}#prev_slide{	position: relative;	bottom:12.5em;}#next_slide{	float:right;	position: relative;	bottom:12.5em;	}/* Конец кода для слайдера */ 

// JavaScript Documentvar slideWidth=500;var sliderTimer;$(function(){$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);    sliderTimer=setInterval(nextSlide,2000);    $('.viewport,.dot').hover(function(){        clearInterval(sliderTimer);    },function(){        sliderTimer=setInterval(nextSlide,2000);    });    $('#next_slide').click(function(){        clearInterval(sliderTimer);        nextSlide();        sliderTimer=setInterval(nextSlide,1500);    });    $('#prev_slide').click(function(){        clearInterval(sliderTimer);        prevSlide();        sliderTimer=setInterval(nextSlide,1500);    });    $('.dot').click(function(){        $('.dot.active').removeClass('active');        $(this).addClass('active');        var n=$('.dot').index(this);        certainSlide(n);    });});function nextSlide(){    var currentSlide=parseInt($('.slidewrapper').data('current'));    currentSlide++;    if(currentSlide>=$('.slidewrapper').children().size())    {        currentSlide=0;       }    $('.dot.active').removeClass('active');    $('.dot').eq(currentSlide).addClass('active');    $('.slidewrapper').animate({left: -currentSlide*slideWidth},800).data('current',currentSlide);}function prevSlide(){    var currentSlide=parseInt($('.slidewrapper').data('current'));    currentSlide--;    if(currentSlide<0)    {        currentSlide=$('.slidewrapper').children().size()-1;       }    $('.dot.active').removeClass('active');    $('.dot').eq(currentSlide).addClass('active');    $('.slidewrapper').animate({left: -currentSlide*slideWidth},800).data('current',currentSlide);}function certainSlide(n){    var currentSlide=n;    $('.slidewrapper').animate({left: -currentSlide*slideWidth},800).data('current',currentSlide);}

Вопрос как настроить slideWidth в em? в px работает на ура

[npofopr]

Публикуйте код в песочницу, например jsfiddle.

И зачем вам em? Думаете слайдер сразу адаптивным станет?

[nightgremlin]

можно в %

без разницы

просто не хочется для каждого экрана отдельно прописывать

http://jsfiddle.net/KdwvV/ - вот пример

[Q4Dizzy]

http://jsfiddle.net/KdwvV/1/

 

так?

[CroaToa]

просто не хочется для каждого экрана отдельно прописывать

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