TGD

Now that makes a lot of since. Thanks guys.

Yea.. I like almost broke my skin trying to do that. Could you try putting the codes I have above into a skin and tell me if it works?

Hey guys, Well I have the Html code, the css, and the JS for the slider. I'm just having trouble putting them into the right spots. I think I'm just putting the JS in the wrong spots.. I don't really know. Here is the coding for it. HTML <h1>Incredibly Basic Slider</h1> <div id="slider"> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> <ul> <li>SLIDE 1</li> <li style="background: #aaa;">SLIDE 2</li> <li>SLIDE 3</li> <li style="background: #aaa;">SLIDE 4</li> </ul> </div> css @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); html { border-top: 5px solid #fff; background: #58DDAF; color: #2a2a2a; } html, body { margin: 0; padding: 0; font-family: 'Open Sans'; } h1 { color: #fff; text-align: center; font-weight: 300; } #slider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px; } #slider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none; } #slider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 300px; height: 150px; background: #ccc; text-align: center; line-height: 270px; } a.control_prev, a.control_next { position: absolute; top: 40%; z-index: 999; display: block; padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #fff; text-decoration: none; font-weight: 600; font-size: 18px; opacity: 0.8; cursor: pointer; } a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: all 0.2s ease; } a.control_prev { border-radius: 0 2px 2px 0; } a.control_next { right: 0; border-radius: 2px 0 0 2px; } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; } JS $(document).ready(function() { //slider function mySlider() { // image array var backImg = new Array(); backImg[0] = "http://newevolutiondesigns.com/images/freebies/nature-hd-background-25.jpg"; backImg[1] = "http://swishost.com/wp-content/uploads/2013/06/Nature-HD-Wallpaper.jpg"; backImg[2] = "http://newevolutiondesigns.com/images/freebies/nature-hd-background-9.jpg"; backImg[3] = "http://2.bp.blogspot.com/-l2QVNj2AglQ/UEhi9bUCd7I/AAAAAAAABDo/dzltwYD5Xr8/s1600/waterfall-forest-green-full-HD-nature-background-wallpaper-for-laptop-widescreen.jpg"; //store image index & array length var i = 0; var x = (backImg.length) - 1; var int = 3500; //function to change background img function changeImg() { $('.slider').css('background-image', 'url(' + backImg[i] + ')'); } //left button click scroll function slideLeft() { if(i <= 0) { i = 3; } else { i--; } changeImg(i); }; //function to change img function slideRight() { if(i >= x) { i = 0; } else { i++; } changeImg(i); }; //left button click scroll $('.btnLeft').click(function() { slideLeft(); }); //right button click scroll $('.btnRight').click(function() { slideRight(); }); //change img every 3.5s window.setInterval(slideRight, int); //onload display index img changeImg(i); } //onload, run slider mySlider(); });