JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://slidesjs.com/js/slides.min.jquery.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1>Title</h1>
</div> <div id="nav"></div>
<div id="social"></div>
<div style="clear:both"></div>
</div>
<div id="body"> <div id="slides"> <div class="slides_container"> <div><img src="http://i784.photobucket.com/albums/yy129/ThunderPeel2001/4dd8ipgs.jpg" alt="" /></div> <div> <img src="http://i784.photobucket.com/albums/yy129/ThunderPeel2001/4dd8ipgs.jpg" alt="" /> </div> <div> <img src="http://i784.photobucket.com/albums/yy129/ThunderPeel2001/4dd8ipgs.jpg" alt="" /> </div> <div> <img src="http://i784.photobucket.com/albums/yy129/ThunderPeel2001/4dd8ipgs.jpg" alt="" /> </div> </div> </div> <div style="clear:both"></div> <div id="maintext"> <div class="column"> <h2>Headline 1...</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula ligula metus, non tristique est. Cras interdum mi sed justo tincidunt eleifend eget at libero. Donec tempor orci id ipsum interdum et volutpat nisl vulputate. Nullam at ante mauris. Fusce et metus ipsum. Mauris gravida tempor leo id iaculis. Vestibulum accumsan, dolor vel congue feugiat, metus erat pulvinar risus, commodo mattis urna elit eu nibh.</p> </div> <div class="column"> <h2>Headline 2...</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula ligula metus, non tristique est. Cras interdum mi sed justo tincidunt eleifend...
CSS
body {
margin:0;
padding:0;
background-color: #efefef;
font-family: arial, sans-serif;
color:#616161;
}
img, div {
padding: 0; margin: 0; border: 0;
}
h2 {
color:#85b03a;
font-size:120%;
letter-spacing: 0px;
font-weight: normal;
}
p {
font-size:80%;
letter-spacing: 0px;
font-weight: normal;
}
#wrapper {
background-color: #fff;
width:980px;
margin:0 auto;
padding:10px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}
#header {
height:66px;
}
#logo {
float:left;
padding:10px 0 0;
}
#nav {
float: left;
}
#nav a {
background: -moz-linear-gradient(center top , #FAA51A, #F47A20) repeat scroll 0 0 transparent;
border: 1px solid #DA7C0C;
border-radius: 12px 12px 12px 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
color: white;
cursor: pointer;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 13px;
font-weight: bold;
height: 16px;
line-height: 16px;
padding: 4px 15px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#social {
float: right;
}
#footer {
margin:20px 0 0;
padding:5px 0 0 0;
border-top: 1px solid #ccc;
}
#footer p {
padding:0;
margin:0;
font-size: 60%;
}
#copyright {
float:left;
}
#credits {
float:right;
}
#slides { margin:0 auto; width:976px; }
.slides_container { width:976px; height:408px; border-radius:10px;
-moz-border-radius:10px; -webkit-border-radius: 10px; }
.slides_container div { width:976px; height:408px; display:block; }
.pagination { margin: 8px auto 0; width: 174px; }
.pagination li { float: left; list-style: none outside none; margin: 0 1px; }
.pagination li a { display: block; float: left; height: 0; overflow: hidden; margin:0 2px; padding-top: ...
JavaScript
$(function() {
$('#slides').slides({
preload: true,
generatePagination: true,
play: 5000,
pause: 2000
});
});