Bogdy
Moderator
Mesaje : 26 Puncte : 69 Reputatie : 1 Data de inscriere : 2011-10-23 Varsta : 32 Localizare : Deva,Jud.Hunedoara
|
|
| Subject: Slider with jQuery Sun Dec 04, 2011 11:32 am
Descriere:Un mic tutorial destre Slider with jQuery. Sper sa va placa. Demonstratie: ClickCSS:Pentru inceput trebuie sa adaugam codul urmator in CSS. Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS >Valideaza. - Code:
#hero-slider { text-align:left; background-color:#efefef; border:1px solid #ccc; width:450px; -moz-border-radius:10px; -webkit-border-radius:10px; margin:0 auto; font-family:arial;}
#hero-slider .mask { float:left; width:300px; height:280px; margin:15px 0 0 10px; overflow:hidden;}
#hero-slider .panel { width:300px; height:280px; text-align:left;}
#hero-slider ul { margin:0; padding:15px 15px 0 15px; list-style:none; float:left; border-right:1px solid #dedede; height:285px;}
#hero-slider ul li { margin:10px 0;}
#hero-slider ul a { outline:none; text-decoration: underline; display:block; width:75px; height:74px; text-indent:-999em;}
#hero-slider a { background: url(http://i24.servimg.com/u/f24/16/54/49/48/button10.png) no-repeat 0 0;}
#hero-slider ul a.active { background-position: -75px;}
.panel h2 { padding:15px 0 0 0; color:#0058a9;}
.panel p { color:#666;}
.clear {clear:both}
HTML & jQuery :Codul in puteti adauga ori unde doriti dumneavoastra pe forum. - Code:
<script type="text/javascript" src="http://emanueltutorials.webs.com/Library.js"></script> <script type="text/javascript" src="http://emanueltutorials.webs.com/Tabele.JS"></script> <script type="text/javascript" src="http://emanueltutorials.webs.com/Functionare.Tabele.JS"></script>
<div id="hero-slider"><ul> <li><a href="#" rel="#panel-1" class="active">Item 1</a></li> <li><a href="#" rel="#panel-2">Item 2</a></li> <li><a href="#" rel="#panel-3">Item 3</a></li></ul>
<div class="mask"> <div class="slider-body"> <div class="panel" id="panel-1">
<h2> TITLU NR:1 </h2> <p>DESCRIERE</p> </div>
<div class="panel" id="panel-2">
<h2> TITLU NR:2 </h2> <p>DESCRIERE</p> </div> <div class="panel" id="panel-3"> <h2>TITLU NR:3</h2> <p>DESCRIERE</p>
</div></div></div> <div class="clear"></div></div>
Tutorial realizat de: EmanuelSursa:Queness
|
| | |
Bogdy
Moderator
Mesaje : 26 Puncte : 69 Reputatie : 1 Data de inscriere : 2011-10-23 Varsta : 32 Localizare : Deva,Jud.Hunedoara
|
|
| Subject: Re: Slider with jQuery Sat Nov 10, 2012 3:14 am
test |
| | |
|
|