SoftDesign


Bun venit Vizitator pe SoftDesign, speram ca-ti place acest forum care iti pune la dispozitie o gama larga de tutoriale si resurse pentru WebDesign si ForumGratuit , si speram ca vei binevoi sa-ti faci cont pe forum pentru a avea aces la toate subiectele forumui.

Slider with jQuery

In jos

Slider with jQuery

Mesaj Scris de Vizitato la data de Mar Sept 06, 2011 4:29 am

Descriere:
Un mic tutorial destre Slider with jQuery.
Sper sa va placa.


Demonstratie: Click

CSS:
Pentru inceput trebuie sa adaugam codul urmator in CSS.
Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS >Valideaza.



Cod:

#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.



Cod:


<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: Emanuel
Sursa:Queness



Ultima editare efectuata de catre Emanuel in Mar Sept 06, 2011 6:28 am, editata de 1 ori
avatar
Vizitato
Vizitator


Sus In jos

Re: Slider with jQuery

Mesaj Scris de k1r0n la data de Mar Sept 06, 2011 5:55 am

Interesant codul , ar merge la un template gri.
avatar
k1r0n
Gold Member

Sex : masculin
Mesaje : 107
Credite : 2675
Data de inscriere : 05/09/2011
Localizare : bacau

Vezi profilul utilizatorului http://smart-design.forumer.ro

Sus In jos

Re: Slider with jQuery

Mesaj Scris de Vizitato la data de Mar Sept 06, 2011 5:57 am

Cu putina imaginatie poti sa faci multe....
avatar
Vizitato
Vizitator


Sus In jos

Re: Slider with jQuery

Mesaj Scris de Vizitato la data de Mar Sept 06, 2011 6:17 am

Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.

Adică să scriu băi codu' ăsta il puneţi in css şi ăsta il puneţi unde doriţi( uau, ce tutorial complex!)
Penibil, cum de altfel va fi şi faptul că mă vei bana şi imi vei şterge mesajul pentru că te oftici prea mult.
avatar
Vizitato
Vizitator


Sus In jos

Re: Slider with jQuery

Mesaj Scris de fraNNNta la data de Mar Sept 06, 2011 7:53 am

Spre fericirea ta nu te va bana Emanuel ca nu moare de ciuda
te voi bana eu daca nu incetezi

____________________________________

avatar
fraNNNta
GFXcrew

Sex : masculin
Mesaje : 235
Credite : 2859
Data de inscriere : 05/09/2011

Vezi profilul utilizatorului http://invatausor.forumotion.com/

Sus In jos

Re: Slider with jQuery

Mesaj Scris de Gyzmo la data de Mier Sept 07, 2011 12:37 am

Elyos, exclus !
avatar
Gyzmo
GFXcrew

Sex : masculin
Mesaje : 727
Credite : 29125
Data de inscriere : 05/09/2011
Localizare : Braila

Vezi profilul utilizatorului http://widegfx.forumer.ro/

Sus In jos

Re: Slider with jQuery

Mesaj Scris de eduard la data de Mier Sept 07, 2011 2:52 am

Foarte bun tutorialu bravo
avatar
eduard
Membru activ

Mesaje : 76
Credite : 2623
Data de inscriere : 05/09/2011

Vezi profilul utilizatorului

Sus In jos

Re: Slider with jQuery

Mesaj Scris de erik39 la data de Vin Sept 09, 2011 11:00 pm

Interesant.Îl pun chiar acum pe forum,
avatar
erik39
Gold Member

Mesaje : 82
Credite : 2638
Data de inscriere : 06/09/2011

Vezi profilul utilizatorului

Sus In jos

Re: Slider with jQuery

Mesaj Scris de Shaggy la data de Sam Sept 10, 2011 12:07 am

poate il folosesc la un teamplet.dar multumim :Rock On:
avatar
Shaggy
Moderator

Sex : masculin
Mesaje : 364
Credite : 2978
Data de inscriere : 06/09/2011
Localizare : Pascani

Vezi profilul utilizatorului http://staraim.forumz.ro/forum

Sus In jos

Re: Slider with jQuery

Mesaj Scris de gab1Tzu la data de Joi Dec 08, 2011 12:43 pm

foarte folositor , bravo
avatar
gab1Tzu
Gold Member

Sex : masculin
Mesaje : 248
Credite : 2790
Data de inscriere : 24/09/2011
Localizare : Craiova

Vezi profilul utilizatorului http://widegfx.forumer.ro

Sus In jos

Re: Slider with jQuery

Mesaj Scris de Omeeu la data de Dum Sept 14, 2014 10:36 am

troll
avatar
Omeeu
Nou venit

Sex : masculin
Mesaje : 7
Credite : 1442
Data de inscriere : 14/09/2014

Vezi profilul utilizatorului http://www.tech-titans.net/

Sus In jos

Re: Slider with jQuery

Mesaj Scris de Continut sponsorizat


Continut sponsorizat


Sus In jos

Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum