javascript - How to set different width of jquery slider -
iam using elastislide responsive carousel slider link
i modification code, want 1 page show 2 slider different width
i want slider 1 width : 100% , slider 2 width : 50%
this code, confused :(
index.html
<head> <link rel="stylesheet" type="text/css" href="css/elastislide.css" /> <script src="js/modernizr.custom.17475.js"></script> </head> <body> <ul id="carousel"> <li><a href="#"><img width="150px" height="160px" src="images/small/1.jpg" alt="image01" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/2.jpg" alt="image02" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/3.jpg" alt="image03" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/4.jpg" alt="image04" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/5.jpg" alt="image05" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/6.jpg" alt="image06" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/7.jpg" alt="image07" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/8.jpg" alt="image08" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/9.jpg" alt="image09" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/10.jpg" alt="image10" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/11.jpg" alt="image11" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/12.jpg" alt="image12" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/13.jpg" alt="image13" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/14.jpg" alt="image14" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/15.jpg" alt="image15" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/16.jpg" alt="image16" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/17.jpg" alt="image17" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/18.jpg" alt="image18" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/19.jpg" alt="image19" /></a></li> <li><a href="#"><img width="150px" height="160px"src="images/small/20.jpg" alt="image20" /></a></li> </ul> <br/><br/> <ul id="carousel2"> <li><a href="#"><img width="150px" height="160px" src="images/small/1.jpg" alt="image01" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/2.jpg" alt="image02" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/3.jpg" alt="image03" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/4.jpg" alt="image04" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/5.jpg" alt="image05" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/6.jpg" alt="image06" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/7.jpg" alt="image07" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/8.jpg" alt="image08" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/9.jpg" alt="image09" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/10.jpg" alt="image10" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/11.jpg" alt="image11" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/12.jpg" alt="image12" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/13.jpg" alt="image13" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/14.jpg" alt="image14" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/15.jpg" alt="image15" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/16.jpg" alt="image16" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/17.jpg" alt="image17" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/18.jpg" alt="image18" /></a></li> <li><a href="#"><img width="150px" height="160px" src="images/small/19.jpg" alt="image19" /></a></li> <li><a href="#"><img width="150px" height="160px"src="images/small/20.jpg" alt="image20" /></a></li> </ul> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.elastislide.js"></script> <script type="text/javascript"> $( '#carousel' ).elastislide(); $( '#carousel2' ).elastislide(); </script> </body> elastislide.css
.elastislide-wrapper { position: relative; background-color: #fff; margin: 0 auto; min-height: 60px; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); } .elastislide-wrapper.elastislide-loading { background-image: url(../images/loading.gif); background-repeat: no-repeat; background-position: center center; } .elastislide-horizontal { padding: 10px 40px; } .elastislide-carousel { overflow: hidden; position: relative; } .elastislide-carousel ul { position: relative; display: block; list-style-type: none; padding: 0; margin: 0; -webkit-backface-visibility: hidden; -webkit-transform: translatex(0px); -moz-transform: translatex(0px); -ms-transform: translatex(0px); -o-transform: translatex(0px); transform: translatex(0px); } .elastislide-horizontal ul { white-space: nowrap; } .elastislide-carousel ul li { margin: 0; -webkit-backface-visibility: hidden; } .elastislide-horizontal ul li { height: 100%; display: inline-block; } .elastislide-carousel ul li { display: inline-block; width: 100%; } .elastislide-carousel ul li img { display: block; border: 2px solid white; max-width: 100%; } /* navigation arrows */ .elastislide-wrapper nav span { position: absolute; background: #ddd url(../images/nav.png) no-repeat 4px 3px; width: 23px; height: 23px; border-radius: 50%; text-indent: -9000px; cursor: pointer; opacity: 0.8; } .elastislide-horizontal nav span { top: 50%; left: 10px; margin-top: -11px; } .elastislide-horizontal nav span.elastislide-next { right: 10px; left: auto; background-position: 4px -17px; } jquery.elastislide.js code in link > link
modernizr.custom.17475.js code in link > link
as far see, gallery containers don't have settings in css. try adding css:
#carousel,#carousel2 { position:relative; } #carousel { width:100%; /*or whatever width want*/ } #carousel2 { width:50%; /*or whatever width want*/ }
Comments
Post a Comment