Hello
can you please provide some example of header slider .I found tinycarousel on internet .
But i am facing one problem
1) i have to show 2 or 3 image (Not one) at a time. user can slide the header
2)on clicking any image one dropdown will open(display) . can you please give me some example?
//*****************************Index.html**********************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiny Carousel: A lightweight jQuery plugin</title>
<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').tinycarousel();
});
function test()
{
alert("*****");
var mySelect = document.getElementById('mySelect'),
newOption = document.createElement('option');
newOption.value = 'bmw';
// Not all browsers support textContent (W3C-compliant)
// When available, textContent is faster (see http://stackoverflow.com/a/1359822/139010)
mySelect.appendChild(newOption);
}
</script>
</head>
<body>
<div id="slider1">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<li><img src="images/picture6.jpg" onclick="test()"/>
<select id="mySelect">
<!--option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option-->
</select>
</li>
<li><img src="images/picture5.jpg" /></li>
<li><img src="images/picture4.jpg" /></li>
<li><img src="images/picture3.jpg" /></li>
<li><img src="images/picture2.jpg" /></li>
<li><img src="images/picture1.jpg" /></li>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
</body>
</html>
**************************css*****************************
/* Tiny Carousel */
#slider1 { height: 1%; overflow:hidden; padding: 0 0 10px; }
#slider1 .viewport { float: left; width: 600px; height: 125px; overflow: hidden; position: relative; }
#slider1 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider1 .next { background-position: 0 0; margin: 30px 0 0 10px; }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}
***************************************js******************************
(function(a){a.tiny=a.tiny||{};a.tiny.carousel={options:{start:1,display:1,axis:"x",controls:true,pager:false,interval:false,intervaltime:3000,rewind:false,animation:true,duration:1000,callback:null}};a.fn.tinycarousel_start=function(){a(this).data("tcl").start()};a.fn.tinycarousel_stop=function(){a(this).data("tcl").stop()};a.fn.tinycarousel_move=function(c){a(this).data("tcl").move(c-1,true)};function b(q,e){var i=this,h=a(".viewport:first",q),g=a(".overview:first",q),k=g.children(),f=a(".next:first",q),d=a(".prev:first",q),l=a(".pager:first",q),w=0,u=0,p=0,j=undefined,o=false,n=true,s=e.axis==="x";function m(){if(e.controls){d.toggleClass("disable",p<=0);f.toggleClass("disable",!(p+1<u))}if(e.pager){var>0&&f.length>0){d.click(function(){i.move(-1);return false});f.click(function(){i.move(1);return false})}if(e.interval){q.hover(i.stop,i.start)}if(e.pager&&l.length>0){a("a",l).click(v)}}this.stop=function(){clearTimeout(j);o=true};this.start=function(){o=false;t()};this.move=function(y,z){p=z?y:p+=y;if(p>-1&&p
Submit an article or tip