main.js HELP!

I downloaded a free bootstrap template and it has on the index page a scrolling slide, you can change the slides from 1-9 but if I want anything pass 9 like 10 it wont display the image. How can I make it so it does take images past 9. The code I think I have to adjust is pasted below. Right now the naming convention is slide01, slide02 etc. I'm a graphics guy so be easy on me ...

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px} span.Apple-tab-span {white-space:pre}

/*

Hielo by TEMPLATED

templated.co @templatedco

Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)

*/



var settings = {



banner: {



// Indicators (= the clickable dots at the bottom).

indicators: true,



// Transition speed (in ms)

// For timing purposes only. It *must* match the transition speed of "#banner > article".

speed: 1500,



// Transition delay (in ms)

delay: 5000,



// Parallax intensity (between 0 and 1; higher = more intense, lower = less intense; 0 = off)

parallax: 0.25



}



};



(function($) {



skel.breakpoints({

xlarge:'(max-width: 1680px)',

large:'(max-width: 1280px)',

medium:'(max-width: 980px)',

small:'(max-width: 736px)',

xsmall:'(max-width: 480px)'

});



/**

* Applies parallax scrolling to an element's background image.

* [USER=23786]@return[/USER] {jQuery} jQuery object.

*/

$.fn._parallax = (skel.vars.browser == 'ie' || skel.vars.mobile) ? function() { return $(this) } : function(intensity) {



var$window = $(window),

$this = $(this);



if (this.length == 0 || intensity === 0)

return $this;



if (this.length > 1) {



for (var i=0; i < this.length; i++)

$(this)._parallax(intensity);



return $this;



}



if (!intensity)

intensity = 0.25;



$this.each(function() {



var $t = $(this),

on, off;



on = function() {



$t.css('background-position', 'center 100%, center 100%, center 0px');



$window

.on('scroll._parallax', function() {



var pos = parseInt($window.scrollTop()) - parseInt($t.position().top);



$t.css('background-position', 'center ' + (pos * (-1 * intensity)) + 'px');



});



};



off = function() {



$t

.css('background-position', '');



$window

.off('scroll._parallax');



};



skel.on('change', function() {



if (skel.breakpoint('medium').active)

(off)();

else

(on)();



});



});



$window

.off('load._parallax resize._parallax')

.on('load._parallax resize._parallax', function() {

$window.trigger('scroll');

});



return $(this);



};



/**

* Custom banner slider for Slate.

* [USER=23786]@return[/USER] {jQuery} jQuery object.

*/

$.fn._slider = function(options) {



var$window = $(window),

$this = $(this);



if (this.length == 0)

return $this;



if (this.length > 1) {



for (var i=0; i < this.length; i++)

$(this)._slider(options);



return $this;



}



// Vars.

varcurrent = 0, pos = 0, lastPos = 0,

slides = [], indicators = [],

$indicators,

$slides = $this.children('article'),

intervalId,

isLocked = false,

i = 0;



// Turn off indicators if we only have one slide.

if ($slides.length == 1)

options.indicators = false;



// Functions.

$this._switchTo = function(x, stop) {



if (isLocked || pos == x)

return;



isLocked = true;



if (stop)

window.clearInterval(intervalId);



// Update positions.

lastPos = pos;

pos = x;



// Hide last slide.

slides[lastPos].removeClass('top');



if (options.indicators)

indicators[lastPos].removeClass('visible');



// Show new slide.

slides[pos].addClass('visible').addClass('top');



if (options.indicators)

indicators[pos].addClass('visible');



// Finish hiding last slide after a short delay.

window.setTimeout(function() {



slides[lastPos].addClass('instant').removeClass('visible');



window.setTimeout(function() {



slides[lastPos].removeClass('instant');

isLocked = false;



}, 100);



}, options.speed);



};



// Indicators.

if (options.indicators)

$indicators = $('<ul class="indicators"></ul>').appendTo($this);



// Slides.

$slides

.each(function() {



var $slide = $(this),

$img = $slide.find('img');



// Slide.

$slide

.css('background-image', 'url("' + $img.attr('src') + '")')

.css('background-position', ($slide.data('position') ? $slide.data('position') : 'center'));



// Add to slides.

slides.push($slide);



// Indicators.

if (options.indicators) {



var $indicator_li = $('<li>' + i + '</li>').appendTo($indicators);



// Indicator.

$indicator_li

.data('index', i)

.on('click', function() {

$this._switchTo($(this).data('index'), true);

});



// Add to indicators.

indicators.push($indicator_li);



}



i++;



})

._parallax(options.parallax);



// Initial slide.

slides[pos].addClass('visible').addClass('top');



if (options.indicators)

indicators[pos].addClass('visible');



// Bail if we only have a single slide.

if (slides.length == 1)

return;



// Main loop.

intervalId = window.setInterval(function() {



current++;



if (current >= slides.length)

current = 0;



$this._switchTo(current);



}, options.delay);



};



$(function() {



var$window = $(window),

$body = $('body'),

$header = $('#header'),

$banner = $('.banner');



// Disable animations/transitions until the page has loaded.

$body.addClass('is-loading');



$window.on('load', function() {

window.setTimeout(function() {

$body.removeClass('is-loading');

}, 100);

});



// Prioritize "important" elements on medium.

skel.on('+medium -medium', function() {

$.prioritize(

'.important\\28 medium\\29',

skel.breakpoint('medium').active

);

});



// Banner.

$banner._slider(settings.banner);



// Menu.

$('#menu')

.append('<a href="#menu" class="close"></a>')

.appendTo($body)

.panel({

delay: 500,

hideOnClick: true,

hideOnSwipe: true,

resetScroll: true,

resetForms: true,

side: 'right'

});



// Header.

if (skel.vars.IEVersion < 9)

$header.removeClass('alt');



if ($banner.length > 0

&&$header.hasClass('alt')) {



$window.on('resize', function() { $window.trigger('scroll'); });



$banner.scrollex({

bottom:$header.outerHeight(),

terminate:function() { $header.removeClass('alt'); },

enter:function() { $header.addClass('alt'); },

leave:function() { $header.removeClass('alt'); $header.addClass('reveal'); }

});



}



});



})(jQuery);

Code (markup):

 

Post the html