Спасибо Рони показали правильное решение
взял за основу известный jQuery плагин карусели и получил желаемый результат ==
карусель
немного добавил CSS для доработки до адаптивности
/* Slider */
#slider ul, #slider li{margin:0; padding:0;list-style:none;overflow: hidden;}
#slider li{width:800px;height:480px;}
#slider li img{ width:100%;}
за счет последней строки img заполняет все пространство #slider li при масштабировании
остальное планирую сделать на jQuery
в 45 строке скрипта
$("ul", obj).css('width',s*w);
дополнить следующее условие
var $width = $(window).width();
if($width< 767 )
{
// вот эту переменную вычислить в зависимости от текущей ширины экрана
$("ul", obj).css('width',s*w);
и выровнять $("#slider>ul") ==> по центру $width
}
else
{
$("ul", obj).css('width',s*w);
}
С уважением Юрий
P.S первые шаги по адаптации jQuey плагинов.