<style>
#slider-b {width:702px;height:392px;padding:4px;background:url(/img/thmb.png);margin:0 0 30px 0;position:relative;}
#slider-b.no-mar {margin:0 0 20px 0;}
.flexslider {position:relative;width:702px;max-width:702px;height:392px;margin:0;padding:0;zoom:1;}
.flexslider .slides {zoom:1;margin:0;padding:0;}
.flexslider .slides > li {display:none;position:relative;overflow:hidden;list-style-type:none;background:none;-webkit-backface-visibility:hidden;margin:0;padding:0;height:392px;}
.slides:after {content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
html[xmlns] .slides {display:block;}
* html .slides {height:1%;}
.no-js .slides > li:first-child {display:block;}
.flexslider .slides img {max-width:710px;min-height:400px;position:relative;top:0;left:-5px;}
.caption {width:662px;background:url(/img/cap.png);text-shadow:1px 1px 0 rgba(0,0,0,.2);color:#fff;position:absolute;z-index:10;left:0;bottom:0;padding:20px;}
.slide-ttl {line-height:20px;font-size:18px;margin-bottom:15px;color:#fff;}
.slide-ttl a {text-decoration:none;}
.slide-txt {font-size:11px;line-height:145%;max-height:64px;overflow:hidden;}
.slide-txt * {padding:0;margin:0;}
.slide-txt img,.slide-txt br {display:none;}
.flex-direction-nav, .flex-direction-nav li {padding:0;margin:0;list-style:none;}
.flex-direction-nav a {position:absolute;top:160px;display:block;width:40px;height:40px;background-position:0 0;white-space:nowrap;text-indent:100%;overflow:hidden;opacity:0;-moz-opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;-ms-transition:opacity .2s ease-in-out;-o-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;}
.flex-direction-nav a.flex-prev {left:0;}
.flex-direction-nav a.flex-next {right:0;background-position:-40px 0;}
.fnav-hov a.flex-prev {opacity:.7;-moz-opacity:.7;filter:alpha(opacity=70);}
.fnav-hov a.flex-next {opacity:.7;-moz-opacity:.7;filter:alpha(opacity=70);}
.flex-direction-nav a:hover {opacity:1;-moz-opacity:1;filter:alpha(opacity=100);background-position:0 -40px;}
.flex-direction-nav a.flex-next:hover {background-position:-40px -40px;}
#slider-b div.single-img {position:relative;overflow:hidden;list-style-type:none;background:none;-webkit-backface-visibility:hidden;margin:0;padding:0;height:392px;}
#slider-b div.single-img img {max-width:710px;min-height:400px;position:relative;top:0;left:-5px;display:block;}
#carousel {position:absolute;left:4px;bottom:4px;width:692px;padding:7px 5px 5px 5px;background:url(/img/cap.png);height:100px;}
#carousel li {margin-right:5px;height:100px;overflow:hidden;}
#carousel img {display:block;opacity:.4;-moz-opacity:.4;filter:alpha(opacity=40);width:100%;min-height:100px;cursor:pointer;left:0;}
#carousel img:hover {opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
#carousel .flex-active-slide img {opacity:1;-moz-opacity:1;filter:alpha(opacity=100);cursor:default;}
#carousel .flex-direction-nav li {margin:0;height:auto;}
#carousel .flex-direction-nav a {top:37px;}
#carousel .fnav-hov .flex-disabled {opacity:0;-moz-opacity:0;filter:alpha(opacity=0);}
</style>

<div id="slider-b" class="no-mar">

<div id="slider" class="flexslider no-js">

<div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">

<li class="slide flex-active-slide" style="display: block; width: 702px; float: left;"><a href="http://16-puzzle.ucoz.com/_ld/0/98068927.jpg" class="ulightbox" data-fancybox-group="ultbx"><img src="http://16-puzzle.ucoz.com/_ld/0/98068927.jpg" alt="Zigfrak" class="fpost-img"></a></li>


<li class="slide" style="display: block; width: 702px; float: left;"><a href="http://16-puzzle.ucoz.com/_ld/0/53946173.jpg" class="ulightbox" data-fancybox-group="ultbx"><img src="http://16-puzzle.ucoz.com/_ld/0/53946173.jpg" alt="Zigfrak"></a></li>


<li class="slide" style="display: block; width: 702px; float: left;"><a href="http://16-puzzle.ucoz.com/_ld/0/23026355.jpg" class="ulightbox" data-fancybox-group="ultbx"><img src="http://16-puzzle.ucoz.com/_ld/0/23026355.jpg" alt="Zigfrak"></a></li>
</ul></div></div>

<div id="carousel" class="flexslider">

<div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">

<li class="flex-active-slide" style="width: 228px; float: left; display: block;"><img src="http://16-puzzle.ucoz.com/_ld/0/98068927.jpg" alt="Zigfrak"></li>


<li style="width: 228px; float: left; display: block;" class=""><img src="http://16-puzzle.ucoz.com/_ld/0/53946173.jpg" alt="Zigfrak"></li>


<li style="width: 228px; float: left; display: block;" class=""><img src="http://16-puzzle.ucoz.com/_ld/0/23026355.jpg" alt="Zigfrak"></li>








</ul></div><script type="text/javascript">
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
animationLoop: false,
slideshow: false,
directionNav: false,
itemWidth: 228,
itemMargin: 4,
asNavFor: '#slider'
});
$("#slider.flexslider").flexslider({
animation: "slide",
animationLoop: false,
directionNav: false,
slideshow: false,
sync: "#carousel"
});
});</script></div>

<script type="text/javascript" src="http://16-puzzle.ucoz.com/js/ui.js"></script>

А как можно добавить свои изображения, то есть добавляю я файл, просто данный слайдер поставил в каталог файлов, и добавим изображения 1 и 2, я хочу, что бы они отображались на данном слайдере.

Но сейчас я вошёл в тупик, я попросту не знаю как это всё правильно прописать. Помогите пожалуйста :)