Как сделать несколько картинок чтобы скролить?!

[zhasikbek]

Ребят подскажите плиз как можно добавить еще картинок вниз чтобы скролить можно было (см. рис.).

 

 

HTML:

<div id="full-width-preview"><!-- start .full-width-preview" -->                <div class="full-width-preview-background opacity_9"></div>                <div id="full-width-preview-media-holder">                <div class="full-width-preview-media-holder-background opacity_0"></div>                <div class="full-width-preview-media-loader"></div><div id="preview-media-holder">                       <div id="preview-media-image" data-url="assets/media/portfolio/images/444.png" data-title="" data-alt="Custom Alt 1"></div>                    <div id="preview-media-image" data-url="assets/media/portfolio/images/222.png" data-title="" data-alt="Custom Alt 1"></div>                    <div id="preview-media-image" data-url="assets/media/portfolio/images/333.png" data-title="" data-alt="Custom Alt 2"></div>                                        <div id="preview-media-image" data-url="assets/media/portfolio/images/4444.png"data-title="" data-alt="Custom Alt 1"></div>                    <div id="preview-media-image" data-url="assets/media/portfolio/images/5555.png"data-title="" data-alt="Custom Alt 3"></div>                                             </div>   

 

CSS:         

#full-width-preview{position:absolute; width:100%;height:100%;    left: 0px;    top: 0px;     z-index:1000;    display:none;    visibility: hidden;}.full-width-preview-background{    position:absolute; width:100%;height:100%;    left: 0px;    top: 0px;    background-image:url(../assets/patterns/menu/menu_pattern_1.png);background-repeat:repeat;    z-index:991;}#full-width-preview-info-holder{position:absolute;height: 100%;top:0px;z-index:992; visibility:hidden;}#full-width-info-container{/*position:relative;float:left;*/display: inline-block;    position: relative;    z-index:2; }.full-width-info-container{top:0px;width:380px;height:100%;background-color:#FFFFFF;}.full-width-info-holder{position:relative;float:left;height:100%;margin:9%;width:82%; }.full-width-info-holder-desc{position:absolute;top:0px;left:0px;width:100%;     display:none;    visibility: hidden;}.full-width-info-holder-desc p, .full-width-info-holder-desc span{position:relative;float:left;width:100%;font-family:PT Sans;font-weight: normal;font-size:22px;color:#3f3f3f;    text-align:left;    }.full-width-info-holder-desc span{line-height:140%;font-size:13px;margin-top: 20px;font-size:14px; line-height: 1.7;}#full-width-preview-media-holder{position:absolute;top:0px;left: 0px;width:100%;/*********/height: 100%;z-index:992;}.full-width-preview-media-holder-background{    position:absolute; width:100%;height:100%;    left: 0px;    top: 0px;    background-color:#000000;}.full-width-preview-media-loader, .gallery-preview-media-loader{    position:relative;    width: 60px;    height: 40px;    top: 50%;    left:50%;    margin-top: -20px;    ;    background-color:#f9f9f9;     background-image:url(../assets/loaders/loader.gif);    background-repeat:no-repeat;background-position:center; }