[COLOR=#333333][FONT=arial]I’m building my first Responsive Web Design project, I added a simple slide show using jQuery on the front page. However, when I test the page, the show does not show up. [/FONT][/COLOR][COLOR=#333333][FONT=arial]
[/FONT][/COLOR]
[COLOR=#333333][FONT=arial]Here is the link, html, and css code
http://www.rodriguezstudios.com/rsrwd/
[/FONT][/COLOR]
<div class="hero-unit">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="slideshow/images/cisco-access-point.jpg" alt="merakibanner">
<span class="left"><strong>100% Cloud Managed Networking</strong>Cloud services are becoming the norm due to its robust and affordable technology. Meraki delivers the top-notch services by cutting the cost of long term maintenance<br />
<p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p></span>
</li>
<li class="s3sliderImage">
<img src="slideshow/images/webdesign.jpg" alt="webbanner">
<span class="left"><h1>Professional Web Design & Development</h1>Rodriguez Studios would like to help your company or business to succed by presenting to your customers a professional looking website<br /><p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p></span>
</li>
<li class="s3sliderImage">
<img src="slideshow/images/facebook-reseller-cover-photo.jpg" alt="wifibanner">
<a href="#" class="btn btn-primary btn-large">Learn more »</a></p></span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div><!--end of slider unit-->
.hero-unit {
padding-top: 0px;
padding-right: 0px;
padding-bottom:0px;
padding-left:0px;
margin-bottom: 0px;
font-size: 18px;
font-weight: 200;
line-height: 30px;
color: inherit;
background-color: #eeeeee;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 6px;
}
.hero-unit h1 {
margin-bottom: 0;
font-size: 60px;
line-height: 1;
letter-spacing: -1px;
color: inherit;
}
.hero-unit li {
line-height: 30px;
}
#s3slider {
width: 836px; /* important to be same as image width */
height: 244px; /* important to be same as image height */
position: absolute; /* important */
overflow: hidden; /* important */
margin: 300px 0 0 206px;
left: 211px;
}
#s3sliderContent {
width: 836px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 12px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 836px;
background-color: #85a3b3;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
}
.left {
top: 0;
left: 0;
width: 180px !important;
height: 280px;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
[COLOR=#333333][FONT=arial]Please help, thanks in advanced![/FONT][/COLOR]
