Good morning friends, well the problem is the following, I downloaded a package for slideshow which I include in my website but it is all unconfigured, does not appear border and does not appear the images of the buttons, I am trying to fix this error ha no minimum 6 hours, the scripts are as follows
Page index:
<html>
<head>
<title>Code Programming</title>
<meta charset="UTF-8">
<!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
<meta name="viewport" content="width=device-width">
<!-- End SlidesJS Required -->
<!-- CSS -->
<style type="text/css">
@import "css/layout.css";
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<link rel="stylesheet" href="css/coin-slider-styles.css" type="text/css"/>
<script>
$(document).ready(function() {
$('#coin-slider').coinslider();
});
</script>
</head>
<body>
<div id="container">
<?php
include "includes/menucabecalho.html";
?>
<div id='coin-slider'>
<a href="img01_url" target="_blank">
<img src='img01.jpg' >
<span>
Description for img01
</span>
</a>
......
......
<a href="imgN_url">
<img src='imgN.jpg' >
<span>
Description for imgN
</span>
</a>
</div>
<?php
include "includes/footer.html";
?>
</div>
</body>
</html>File coin-slider.js
/**
* Coin Slider - Unique jQuery Image Slider
* @version: 1.0 - (2010/04/04)
* @requires jQuery v1.2.2 or later
* @author Ivan Lazarevic
* Examples and documentation at: http://workshop.rs/projects/coin-slider/
* Licensed under MIT licence:
* http://www.opensource.org/licenses/mit-license.php
**/
(function($) {
var params = new Array;
var order = new Array;
var images = new Array;
var links = new Array;
var linksTarget = new Array;
var titles = new Array;
var interval = new Array;
var imagePos = new Array;
var appInterval = new Array;
var squarePos = new Array;
var reverse = new Array;
$.fn.coinslider= $.fn.CoinSlider = function(options){
init = function(el){
order[el.id] = new Array(); // order of square appereance
images[el.id] = new Array();
links[el.id] = new Array();
linksTarget[el.id] = new Array();
titles[el.id] = new Array();
imagePos[el.id] = 0;
squarePos[el.id] = 0;
reverse[el.id] = 1;
params[el.id] = $.extend({}, $.fn.coinslider.defaults, options);
// create images, links and titles arrays
$.each($('#'+el.id+' img'), function(i,item){
images[el.id][i] = $(item).attr('src');
links[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('href') : '';
linksTarget[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('target') : '';
titles[el.id][i] = $(item).next().is('span') ? $(item).next().html() : '';
$(item).hide();
$(item).next().hide();
});
// set panel
$(el).css({
'background-image':'url('+images[el.id][0]+')',
'width': params[el.id].width,
'height': params[el.id].height,
'position': 'relative',
'background-position': 'top left'
}).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />");
// create title bar
$('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");
$.setFields(el);
if(params[el.id].navigation)
$.setNavigation(el);
$.transition(el,0);
$.transitionCall(el);
}
// squares positions
$.setFields = function(el){
tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw);
tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph);
counter = sLeft = sTop = 0;
tgapx = gapx = params[el.id].width - params[el.id].spw*sWidth;
tgapy = gapy = params[el.id].height - params[el.id].sph*sHeight;
for(i=1;i <= params[el.id].sph;i++){
gapx = tgapx;
if(gapy > 0){
gapy--;
sHeight = tHeight+1;
} else {
sHeight = tHeight;
}
for(j=1; j <= params[el.id].spw; j++){
if(gapx > 0){
gapx--;
sWidth = tWidth+1;
} else {
sWidth = tWidth;
}
order[el.id][counter] = i+''+j;
counter++;
if(params[el.id].links)
$('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>");
else
$('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>");
// positioning squares
$("#cs-"+el.id+i+j).css({
'background-position': -sLeft +'px '+(-sTop+'px'),
'left' : sLeft ,
'top': sTop
});
sLeft += sWidth;
}
sTop += sHeight;
sLeft = 0;
}
$('.cs-'+el.id).mouseover(function(){
$('#cs-navigation-'+el.id).show();
});
$('.cs-'+el.id).mouseout(function(){
$('#cs-navigation-'+el.id).hide();
});
$('#cs-title-'+el.id).mouseover(function(){
$('#cs-navigation-'+el.id).show();
});
$('#cs-title-'+el.id).mouseout(function(){
$('#cs-navigation-'+el.id).hide();
});
if(params[el.id].hoverPause){
$('.cs-'+el.id).mouseover(function(){
params[el.id].pause = true;
});
$('.cs-'+el.id).mouseout(function(){
params[el.id].pause = false;
});
$('#cs-title-'+el.id).mouseover(function(){
params[el.id].pause = true;
});
$('#cs-title-'+el.id).mouseout(function(){
params[el.id].pause = false;
});
}
};
$.transitionCall = function(el){
clearInterval(interval[el.id]);
delay = params[el.id].delay + params[el.id].spw*params[el.id].sph*params[el.id].sDelay;
interval[el.id] = setInterval(function() { $.transition(el) }, delay);
}
// transitions
$.transition = function(el,direction){
if(params[el.id].pause == true) return;
$.effect(el);
squarePos[el.id] = 0;
appInterval[el.id] = setInterval(function() { $.appereance(el,order[el.id][squarePos[el.id]]) },params[el.id].sDelay);
$(el).css({ 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
if(typeof(direction) == "undefined")
imagePos[el.id]++;
else
if(direction == 'prev')
imagePos[el.id]--;
else
imagePos[el.id] = direction;
if (imagePos[el.id] == images[el.id].length) {
imagePos[el.id] = 0;
}
if (imagePos[el.id] == -1){
imagePos[el.id] = images[el.id].length-1;
}
$('.cs-button-'+el.id).removeClass('cs-active');
$('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active');
if(titles[el.id][imagePos[el.id]]){
$('#cs-title-'+el.id).css({ 'opacity' : 0 }).animate({ 'opacity' : params[el.id].opacity }, params[el.id].titleSpeed);
$('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);
} else {
$('#cs-title-'+el.id).css('opacity',0);
}
};
$.appereance = function(el,sid){
$('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);
if (squarePos[el.id] == params[el.id].spw*params[el.id].sph) {
clearInterval(appInterval[el.id]);
return;
}
$('#cs-'+el.id+sid).css({ opacity: 0, 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
$('#cs-'+el.id+sid).animate({ opacity: 1 }, 300);
squarePos[el.id]++;
};
// navigation
$.setNavigation = function(el){
// create prev and next
$(el).append("<div id='cs-navigation-"+el.id+"'></div>");
$('#cs-navigation-'+el.id).hide();
$('#cs-navigation-'+el.id).append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'>prev</a>");
$('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'>next</a>");
$('#cs-prev-'+el.id).css({
'position' : 'absolute',
'top' : params[el.id].height/2 - 15,
'left' : 0,
'z-index' : 1001,
'line-height': '30px',
'opacity' : params[el.id].opacity
}).click( function(e){
e.preventDefault();
$.transition(el,'prev');
$.transitionCall(el);
}).mouseover( function(){ $('#cs-navigation-'+el.id).show() });
$('#cs-next-'+el.id).css({
'position' : 'absolute',
'top' : params[el.id].height/2 - 15,
'right' : 0,
'z-index' : 1001,
'line-height': '30px',
'opacity' : params[el.id].opacity
}).click( function(e){
e.preventDefault();
$.transition(el);
$.transitionCall(el);
}).mouseover( function(){ $('#cs-navigation-'+el.id).show() });
// image buttons
$("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider-'+el.id));
for(k=1;k<images[el.id].length+1;k++){
$('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'>"+k+"</a>");
}
$.each($('.cs-button-'+el.id), function(i,item){
$(item).click( function(e){
$('.cs-button-'+el.id).removeClass('cs-active');
$(this).addClass('cs-active');
e.preventDefault();
$.transition(el,i);
$.transitionCall(el);
})
});
$('#cs-navigation-'+el.id+' a').mouseout(function(){
$('#cs-navigation-'+el.id).hide();
params[el.id].pause = false;
});
$("#cs-buttons-"+el.id).css({
'left' : '50%',
'margin-left' : -images[el.id].length*15/2-5,
'position' : 'relative'
});
}
// effects
$.effect = function(el){
effA = ['random','swirl','rain','straight'];
if(params[el.id].effect == '')
eff = effA[Math.floor(Math.random()*(effA.length))];
else
eff = params[el.id].effect;
order[el.id] = new Array();
if(eff == 'random'){
counter = 0;
for(i=1;i <= params[el.id].sph;i++){
for(j=1; j <= params[el.id].spw; j++){
order[el.id][counter] = i+''+j;
counter++;
}
}
$.random(order[el.id]);
}
if(eff == 'rain') {
$.rain(el);
}
if(eff == 'swirl')
$.swirl(el);
if(eff == 'straight')
$.straight(el);
reverse[el.id] *= -1;
if(reverse[el.id] > 0){
order[el.id].reverse();
}
}
// shuffle array function
$.random = function(arr) {
var i = arr.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = arr[i];
var tempj = arr[j];
arr[i] = tempj;
arr[j] = tempi;
}
}
//swirl effect by milos popovic
$.swirl = function(el){
var n = params[el.id].sph;
var m = params[el.id].spw;
var x = 1;
var y = 1;
var going = 0;
var num = 0;
var c = 0;
var dowhile = true;
while(dowhile) {
num = (going==0 || going==2) ? m : n;
for (i=1;i<=num;i++){
order[el.id][c] = x+''+y;
c++;
if(i!=num){
switch(going){
case 0 : y++; break;
case 1 : x++; break;
case 2 : y--; break;
case 3 : x--; break;
}
}
}
going = (going+1)%4;
switch(going){
case 0 : m--; y++; break;
case 1 : n--; x++; break;
case 2 : m--; y--; break;
case 3 : n--; x--; break;
}
check = $.max(n,m) - $.min(n,m);
if(m<=check && n<=check)
dowhile = false;
}
}
// rain effect
$.rain = function(el){
var n = params[el.id].sph;
var m = params[el.id].spw;
var c = 0;
var to = to2 = from = 1;
var dowhile = true;
while(dowhile){
for(i=from;i<=to;i++){
order[el.id][c] = i+''+parseInt(to2-i+1);
c++;
}
to2++;
if(to < n && to2 < m && n<m){
to++;
}
if(to < n && n>=m){
to++;
}
if(to2 > m){
from++;
}
if(from > to) dowhile= false;
}
}
// straight effect
$.straight = function(el){
counter = 0;
for(i=1;i <= params[el.id].sph;i++){
for(j=1; j <= params[el.id].spw; j++){
order[el.id][counter] = i+''+j;
counter++;
}
}
}
$.min = function(n,m){
if (n>m) return m;
else return n;
}
$.max = function(n,m){
if (n<m) return m;
else return n;
}
this.each (
function(){ init(this); }
);
};
// default values
$.fn.coinslider.defaults = {
width: 565, // width of slider panel
height: 290, // height of slider panel
spw: 7, // squares per width
sph: 5, // squares per height
delay: 3000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: '', // random, swirl, rain, straight
navigation: true, // prev next and buttons
links : true, // show images as links
hoverPause: true // pause on hover
};
})(jQuery);
File coin-slider.min:
/**
* Coin Slider - Unique jQuery Image Slider
* @version: 1.0 - (2010/04/04)
* @requires jQuery v1.2.2 or later
* @author Ivan Lazarevic
* Examples and documentation at: http://workshop.rs/projects/coin-slider/
* Licensed under MIT licence:
* http://www.opensource.org/licenses/mit-license.php
**/
(function($){var params=new Array;var order=new Array;var images=new Array;var links=new Array;var linksTarget=new Array;var titles=new Array;var interval=new Array;var imagePos=new Array;var appInterval=new Array;var squarePos=new Array;var reverse=new Array;$.fn.coinslider=$.fn.CoinSlider=function(options){init=function(el){order[el.id]=new Array();images[el.id]=new Array();links[el.id]=new Array();linksTarget[el.id]=new Array();titles[el.id]=new Array();imagePos[el.id]=0;squarePos[el.id]=0;reverse[el.id]=1;params[el.id]=$.extend({},$.fn.coinslider.defaults,options);$.each($('#'+el.id+' img'),function(i,item){images[el.id][i]=$(item).attr('src');links[el.id][i]=$(item).parent().is('a')?$(item).parent().attr('href'):'';linksTarget[el.id][i]=$(item).parent().is('a')?$(item).parent().attr('target'):'';titles[el.id][i]=$(item).next().is('span')?$(item).next().html():'';$(item).hide();$(item).next().hide();});$(el).css({'background-image':'url('+images[el.id][0]+')','width':params[el.id].width,'height':params[el.id].height,'position':'relative','background-position':'top left'}).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />");$('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");$.setFields(el);if(params[el.id].navigation)
$.setNavigation(el);$.transition(el,0);$.transitionCall(el);}
$.setFields=function(el){tWidth=sWidth=parseInt(params[el.id].width/params[el.id].spw);tHeight=sHeight=parseInt(params[el.id].height/params[el.id].sph);counter=sLeft=sTop=0;tgapx=gapx=params[el.id].width-params[el.id].spw*sWidth;tgapy=gapy=params[el.id].height-params[el.id].sph*sHeight;for(i=1;i<=params[el.id].sph;i++){gapx=tgapx;if(gapy>0){gapy--;sHeight=tHeight+1;}else{sHeight=tHeight;}
for(j=1;j<=params[el.id].spw;j++){if(gapx>0){gapx--;sWidth=tWidth+1;}else{sWidth=tWidth;}
order[el.id][counter]=i+''+j;counter++;if(params[el.id].links)
$('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>");else
$('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>");$("#cs-"+el.id+i+j).css({'background-position':-sLeft+'px '+(-sTop+'px'),'left':sLeft,'top':sTop});sLeft+=sWidth;}
sTop+=sHeight;sLeft=0;}
$('.cs-'+el.id).mouseover(function(){$('#cs-navigation-'+el.id).show();});$('.cs-'+el.id).mouseout(function(){$('#cs-navigation-'+el.id).hide();});$('#cs-title-'+el.id).mouseover(function(){$('#cs-navigation-'+el.id).show();});$('#cs-title-'+el.id).mouseout(function(){$('#cs-navigation-'+el.id).hide();});if(params[el.id].hoverPause){$('.cs-'+el.id).mouseover(function(){params[el.id].pause=true;});$('.cs-'+el.id).mouseout(function(){params[el.id].pause=false;});$('#cs-title-'+el.id).mouseover(function(){params[el.id].pause=true;});$('#cs-title-'+el.id).mouseout(function(){params[el.id].pause=false;});}};$.transitionCall=function(el){clearInterval(interval[el.id]);delay=params[el.id].delay+params[el.id].spw*params[el.id].sph*params[el.id].sDelay;interval[el.id]=setInterval(function(){$.transition(el)},delay);}
$.transition=function(el,direction){if(params[el.id].pause==true)return;$.effect(el);squarePos[el.id]=0;appInterval[el.id]=setInterval(function(){$.appereance(el,order[el.id][squarePos[el.id]])},params[el.id].sDelay);$(el).css({'background-image':'url('+images[el.id][imagePos[el.id]]+')'});if(typeof(direction)=="undefined")
imagePos[el.id]++;else
if(direction=='prev')
imagePos[el.id]--;else
imagePos[el.id]=direction;if(imagePos[el.id]==images[el.id].length){imagePos[el.id]=0;}
if(imagePos[el.id]==-1){imagePos[el.id]=images[el.id].length-1;}
$('.cs-button-'+el.id).removeClass('cs-active');$('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active');if(titles[el.id][imagePos[el.id]]){$('#cs-title-'+el.id).css({'opacity':0}).animate({'opacity':params[el.id].opacity},params[el.id].titleSpeed);$('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);}else{$('#cs-title-'+el.id).css('opacity',0);}};$.appereance=function(el,sid){$('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);if(squarePos[el.id]==params[el.id].spw*params[el.id].sph){clearInterval(appInterval[el.id]);return;}
$('#cs-'+el.id+sid).css({opacity:0,'background-image':'url('+images[el.id][imagePos[el.id]]+')'});$('#cs-'+el.id+sid).animate({opacity:1},300);squarePos[el.id]++;};$.setNavigation=function(el){$(el).append("<div id='cs-navigation-"+el.id+"'></div>");$('#cs-navigation-'+el.id).hide();$('#cs-navigation-'+el.id).append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'>prev</a>");$('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'>next</a>");$('#cs-prev-'+el.id).css({'position':'absolute','top':params[el.id].height/2-15,'left':0,'z-index':1001,'line-height':'30px','opacity':params[el.id].opacity}).click(function(e){e.preventDefault();$.transition(el,'prev');$.transitionCall(el);}).mouseover(function(){$('#cs-navigation-'+el.id).show()});$('#cs-next-'+el.id).css({'position':'absolute','top':params[el.id].height/2-15,'right':0,'z-index':1001,'line-height':'30px','opacity':params[el.id].opacity}).click(function(e){e.preventDefault();$.transition(el);$.transitionCall(el);}).mouseover(function(){$('#cs-navigation-'+el.id).show()});$("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider-'+el.id));for(k=1;k<images[el.id].length+1;k++){$('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'>"+k+"</a>");}
$.each($('.cs-button-'+el.id),function(i,item){$(item).click(function(e){$('.cs-button-'+el.id).removeClass('cs-active');$(this).addClass('cs-active');e.preventDefault();$.transition(el,i);$.transitionCall(el);})});$('#cs-navigation-'+el.id+' a').mouseout(function(){$('#cs-navigation-'+el.id).hide();params[el.id].pause=false;});$("#cs-buttons-"+el.id).css({'left':'50%','margin-left':-images[el.id].length*15/2-5,'position':'relative'});}
$.effect=function(el){effA=['random','swirl','rain','straight'];if(params[el.id].effect=='')
eff=effA[Math.floor(Math.random()*(effA.length))];else
eff=params[el.id].effect;order[el.id]=new Array();if(eff=='random'){counter=0;for(i=1;i<=params[el.id].sph;i++){for(j=1;j<=params[el.id].spw;j++){order[el.id][counter]=i+''+j;counter++;}}
$.random(order[el.id]);}
if(eff=='rain'){$.rain(el);}
if(eff=='swirl')
$.swirl(el);if(eff=='straight')
$.straight(el);reverse[el.id]*=-1;if(reverse[el.id]>0){order[el.id].reverse();}}
$.random=function(arr){var i=arr.length;if(i==0)return false;while(--i){var j=Math.floor(Math.random()*(i+1));var tempi=arr[i];var tempj=arr[j];arr[i]=tempj;arr[j]=tempi;}}
$.swirl=function(el){var n=params[el.id].sph;var m=params[el.id].spw;var x=1;var y=1;var going=0;var num=0;var c=0;var dowhile=true;while(dowhile){num=(going==0||going==2)?m:n;for(i=1;i<=num;i++){order[el.id][c]=x+''+y;c++;if(i!=num){switch(going){case 0:y++;break;case 1:x++;break;case 2:y--;break;case 3:x--;break;}}}
going=(going+1)%4;switch(going){case 0:m--;y++;break;case 1:n--;x++;break;case 2:m--;y--;break;case 3:n--;x--;break;}
check=$.max(n,m)-$.min(n,m);if(m<=check&&n<=check)
dowhile=false;}}
$.rain=function(el){var n=params[el.id].sph;var m=params[el.id].spw;var c=0;var to=to2=from=1;var dowhile=true;while(dowhile){for(i=from;i<=to;i++){order[el.id][c]=i+''+parseInt(to2-i+1);c++;}
to2++;if(to<n&&to2<m&&n<m){to++;}
if(to<n&&n>=m){to++;}
if(to2>m){from++;}
if(from>to)dowhile=false;}}
$.straight=function(el){counter=0;for(i=1;i<=params[el.id].sph;i++){for(j=1;j<=params[el.id].spw;j++){order[el.id][counter]=i+''+j;counter++;}}}
$.min=function(n,m){if(n>m)return m;else return n;}
$.max=function(n,m){if(n<m)return m;else return n;}
this.each(function(){init(this);});};$.fn.coinslider.defaults={width:565,height:290,spw:7,sph:5,delay:3000,sDelay:30,opacity:0.7,titleSpeed:500,effect:'',navigation:true,links:true,hoverPause:true};})(jQuery);
$('#coin-slider').coinslider();Coin-slider-style file:
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; } Image of the site 
HTMLCodeFROMTHEPAGE:
<!-- saved from url=(0033)http://127.0.0.1/CodeProgramming/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Code Programming</title>
<meta charset="UTF-8">
<!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
<meta name="viewport" content="width=device-width">
<!-- End SlidesJS Required -->
<!-- CSS -->
<style type="text/css">
@import "css/layout.css";
</style>
<link rel="stylesheet" href="./Code Programming2_files/coin-slider-styles.css" type="text/css">
<script type="text/javascript" src="./Code Programming2_files/coin-slider.min.js"></script>
<script>
$(document).ready(function() {
$('#coin-slider').coinslider();
});
</script>
<script src="./Code Programming2_files/jquery.min.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>Code Programming</h1>
</header>
<nav>
<ol>
<li><a href="">Principal</a></li>
<li><a href="">Faculdade</a></li>
<li><a href="">Links</a></li>
<li><a href="">Outros</a></li>
</ol>
</nav>
<div id="coin-slider">
<a href="http://127.0.0.1/CodeProgramming/img01_url" target="_blank">
<img src="./Code Programming2_files/img01.jpg">
<span>
Description for img01
</span>
</a>
......
......
<a href="http://127.0.0.1/CodeProgramming/imgN_url">
<img src="./Code Programming2_files/imgN.jpg">
<span>
Description for imgN
</span>
</a>
</div>
<footer></footer>
</div>
</body></html>