login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Horizontaal sliden (geen foto's!!) hoe?

Offline GroundZero - 29/12/2012 15:15
Avatar van GroundZeroLid Beste, ik ben nu al dagen bezig maar krijg het niet voor elkaar. Bestaande sliders krijg ik niet aangepast naar wat ik wil omdat deze allemaal op één foto afgestemd zijn.

Ik heb het volgende:

<div class="mijn_div">

</div>

Deze heeft de volgende CSS:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .showcase {
  2. 	width:100%;
  3. 	height:150px;
  4. 	float:left;
  5. 	background:#FFF;
  6. 	padding-top:10px;	
  7. 	box-shadow:0px 0px 5px #fff;
  8. 	-moz-box-shadow:0px 0px 5px #fff;
  9. 	-webkit-box-shadow:0px 0px 5px #fff;
  10. }


Nu heb ik daar in diverse foto's en andere dingen staan (ook tekst).
Deze worden in een <li></li> weergegeven.

De div is 1100 pixels breed, ik heb dit in 3 gedeeld. Ik geef dus 3 li's weer per keer.

Ik wil nu graag dat er links en rechts een pijl is voor een volgende / vorige. Wanneer je daar op klikt dat hij 3 terug of 3 verder gaat.

Zou iemand voor mij een voorbeeld code kunnen maken? want na x-aantal dagen meerdere uren per dag proberen ben ik nog geen steek verder. Ik snap het javascript / jquery gebeuren gewoonweg niet goed 

Groetjes

2 antwoorden

Gesponsorde links
Offline ArieMedia - 30/12/2012 03:09
Avatar van ArieMedia Gouden medaille

PHP ver gevorderde
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('.mijndiv').animate({width: '300px'}, 500, 'easeInOutQuad');


500 is de snelheid, easeInOutQuad de animatie functie, width 300px spreekt voor zich
Offline Martijn - 02/01/2013 21:50
Avatar van Martijn Crew PHP Mag ik een makkelijker iets voorstellen? Download toch een makkelijk scriptje voor sliden (ik raad cyclelite aan, ZEER lightweight voor dit).

Vervolgens doe je dit met je html:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul>
  2.   <li>
  3.     <div>Vakje a1</div>
  4.     <div>Vakje a2</div>
  5.     <div>Vakje a3</div>
  6.   </li>
  7.  
  8.   <li>
  9.     <div>Vakje b1</div>
  10.     <div>Vakje b2</div>
  11.     <div>Vakje b3</div>
  12.   </li>
  13. </ul>


En dan je div´s opmaken zoals je nu je listitems heb geplaatst ±'
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.18s