RadioSean Posted May 6, 2013 Share Posted May 6, 2013 <div id="carousel"> <ul id="tabs"> <li class="on"><a href="#" target="">Title 1</a></li> <li class=""><a href="#" target="">Title 2</a></li> <li class=""><a href="#" target="">Title 3</a></li> <li class=""><a href="#" target="">Title 4</a></li> </ul> <ul id="panel"> <li class="on" style="background-image: url(panel-1.png); display: block;"><a href="#" target=""><h6>Header for panel 1</h6><span>This is the text for panel 1</span></a></li> <li style="background-image: url(panel-2.png); display: none;"><a href="#" target=""><h6>Header for panel 2</h6><span>This is the text for panel 2</span></a></li> <li style="background-image: url(panel-3.png); display: none;"><a href="#" target=""><h6>Header for panel 3</h6><span>This is the text for panel 3</span></a></li> <li style="background-image: url(panel-4.png); display: none;"><a href="#" target=""><h6>Header for panel 4</h6><span>This is the text for panel 4</span></a></li> </ul> </div> #carousel{width:535px;height:226px;overflow:hidden;margin:0 0 15px 0} #tabs{margin:0;padding:0;list-style:none;width:135px;float:left;padding-top:8px} #tabs li a{color:#000000;text-shadow:0 1px 0 #fff;display:block;margin-bottom:10px;height:31px;padding:7px 10px;background-color:#F0E8D0;text-decoration: none;} #tabs li.on a{background-color:#800000;color:#fff;text-shadow:0 -1px 0 #ae0062;font-weight:bold; text-decoration: none;} #tabs li a:hover{background-color:#800000;color:#fff;text-shadow:0 -1px 0 #ae0062;font-weight:bold; text-decoration: none;} #panel{margin:0;padding:0;list-style:none;float:left} #panel li{display:none;position:relative} #panel li.on{display:block} #panel li a{display:block;width:400px;height:226px;text-decoration:none} #panel h6 {display: inline-block;background-color:#800000;padding:4px 8px;max-width:374px;position: absolute;left:15px;bottom:1px;color:#fff;text-shadow:0 -1px 0 #ae0062; font-weight: bold; font-size: 150%; } #panel li a span{display:inline-block;background-color:#800000;padding:4px 8px;width:374px;position:absolute;right:0;bottom:10px;color:#fff;text-shadow:0 -1px 0 #ae0062} I am after someone to do the jQuery / Javascript on this carousel I have done. I would like it to change to the next slide automatically and also change on hover Quote Link to comment https://forums.phpfreaks.com/topic/277705-carousel-help/ Share on other sites More sharing options...
Irate Posted May 6, 2013 Share Posted May 6, 2013 Well, this forum isn't here to help you to do your homework :s Anyway, do you have any idea at all how you could solve this? Quote Link to comment https://forums.phpfreaks.com/topic/277705-carousel-help/#findComment-1428618 Share on other sites More sharing options...
RadioSean Posted May 6, 2013 Author Share Posted May 6, 2013 I have no idea how to solve it thats why I thought I would ask for help here but if its not that kind of forum I will take my business elsewhere. Quote Link to comment https://forums.phpfreaks.com/topic/277705-carousel-help/#findComment-1428619 Share on other sites More sharing options...
Irate Posted May 6, 2013 Share Posted May 6, 2013 Well, if it's not your homework, sure. Do you want the carousel to turn automatically after a time or only when someone hovers over it? Quote Link to comment https://forums.phpfreaks.com/topic/277705-carousel-help/#findComment-1428620 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.