jssor slider list for latest news on homepage

I have downloaded all the files for Jssor Slider and have it all installed and its working fine with the html version, but I wanted to use this style of slider to show my latest posts on the homepage of my website homepage but I can’t figure out how to write the loop into the divs to keep the style and function. I am still working locally.

This is the html, I just want to make it work for 4 latest posts but I’m not 100% sure how to do this. Any help would be great.

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 810px; height: 300px; background: #000; overflow: hidden; ">

        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
                top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>

        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
            overflow: hidden;">
            <div>
                <img u="image" src="../img/photography/002.jpg" />
                <div u="thumb">
                    <img class="i" src="../img/photography/thumb-002.jpg" /><div class="t">Banner Rotator</div>
                    <div class="c">360+ touch swipe slideshow effects</div>
                </div>
            </div>
            <div>
                <img u="image" src="../img/photography/003.jpg" />
                <div u="thumb">
                    <img class="i" src="../img/photography/thumb-003.jpg" /><div class="t">Image Gallery</div>
                    <div class="c">Image gallery with thumbnail navigation</div>
                </div>
            </div>
            <div>
                <img u="image" src="../img/photography/004.jpg" />
                <div u="thumb">
                    <img class="i" src="../img/photography/thumb-004.jpg" /><div class="t">Carousel</div>
                    <div class="c">Touch swipe, mobile device optimized</div>
                </div>
            </div>
            <div>
                <img u="image" src="../img/photography/005.jpg" />
                <div u="thumb">
                    <img class="i" src="../img/photography/thumb-005.jpg" /><div class="t">Themes</div>
                    <div class="c">30+ professional themems + growing</div>
                </div>
            </div>
            <div>
                <img u="image" src="../img/photography/006.jpg" />
                <div u="thumb">
                    <img class="i" src="../img/photography/thumb-006.jpg" /><div class="t">Tab Slider</div>
                    <div class="c">Tab slider with auto play options</div>
                </div>
            </div>
        </div>

        <div u="thumbnavigator" class="jssort11" style="left: 605px; top:0px;">
            <!-- Thumbnail Item Skin Begin -->
            <div u="slides" style="cursor: default;">
                <div u="prototype" class="p" style="top: 0; left: 0;">
                    <div u="thumbnailtemplate" class="tp"></div>
                </div>
            </div>
            <!-- Thumbnail Item Skin End -->
        </div>