Jump to content

carousel help


RadioSean

Recommended Posts

<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

 

 

 

Link to comment
https://forums.phpfreaks.com/topic/277705-carousel-help/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.