Question

I have made use of var slideWidth = 420; to specify sliders width and then $('#slideInner').css('width', slideWidth * numberOfSlides); to calculate all sliders width for long time and it was working fine with pixels

Problem

I need to use % and Jquery seems not to understand it.

// slider
   var currentPosition = 0;
   var slideWidth = 420; // Use quotes('') for %  
   var slides = $('.slide'); // for each image
   var numberOfSlides = 4; // slides.length: show all images 

   // Remove scrollbar in JS 
   $('.slidesContainer').css('overflow', 'hidden');

   // Wrap all .slides with #slideInner div

   slides.wrapAll('<div id="slideInner"></div>').css({'float' : 'left','width' : slideWidth});

   // Float left to display horizontally, readjust .slides width
   /* 
   Set #slideInner width equal to total width of all slides
   #slideInner wraps all of our slides that has a width equal to total width of all .slide div.

   Problem: It needs a fix variable to calculate width    

   */

    $('#slideInner').css('width', slideWidth * numberOfSlides);  

Answer 1

Try something like this:

// slider
var currentPosition = 0;
var slideWidthPct = 80; // this is a percent (between 0 and 100)
var slides = $('.slide'); // for each image
var numberOfSlides = Math.min(4, slides.length); // slides.length: show all images 
var singleSlideWidth = slideWidthPct / numberOfSlides;

// Remove scrollbar in JS 
$('.slidesContainer').css('overflow', 'hidden');

// Wrap all .slides with #slideInner div

slides.wrapAll('<div id="slideInner"></div>').css({'float' : 'left','width' : "" + singleSlideWidth + "%"});

// Float left to display horizontally, readjust .slides width
$('#slideInner').css('width', "" + slideWidthPct + "%");  

Working example based on your code: http://jsfiddle.net/7B8Bb/3/