ive just started learning jquery and im struggling. Im trying to create an offline page that  incorporated a uislider that links a series of images (over 200) so when the slider is dragged it creates an animation, this will be a simulated construction build at a given camera view. I would like to have jquery check a local folder if possible and use all images  in that folder as apposed to listing them individually. I would also like the position of the slider to be remembered between webpages and refresh as I would like to have different different camera views.

I think this is beyond my skill level so any help would be very much appreciated. I have created a basic slider using this script but chrome freaks out over 70 images

<div class="rotatebox">

<div class="images"> </div>

<div class="slider"></div>

</div>

<script>

"./images/1.jpg",

"./images/2.jpg",

"./images/3.jpg",

"./images/4.jpg",

"./images/5.jpg",

"./images/6.jpg",

"./images/7.jpg",

"./images/8.jpg",

"./images/9.jpg",

"./images/10.jpg",

</script>

1. rotate = function(images){
2.   $(function(){
3.     $.each(images, function(i,v){
4.       $('.rotatebox .images').append('<img src="' + v + '" data-nth="' + i + '" />');
5.     });
6.     $('.rotatebox .images img').css('z-index', '1');
7.     $('.rotatebox .images img').first().css('z-index', '2');
8.     $('.rotatebox .slider').slider({
9.       min: 0,
10.       max: (images.length * 2) - 1,
11.       value: 0,
12.       slide: function(evt, ui){
13.         target = ui.value % images.length;
14.         $('.rotatebox .images img').css('z-index', '1');
15.         $('.rotatebox .images img[data-nth=' + target + ']').css('z-index', '2');
16.       },
17.     });
18.   });
19. };