Tekst/bilde slider?

[Tesio]

Hei,

 

Jeg lurte på om noen av dere vet hvordan jeg kan få til en slags dual slide med både bilde og tekst vha. trykke på bildet/knapper? Jeg har ikke peiling på JavaScript, og har derfor tenkt å benytte meg en JQuery ferdig løsning, eventuelt CSS3 Transistion.

 

Det jeg tenkte på da er f.eks hvis du har 5 bilder, så skal du kunne slide mellom dem ved hjelp av piler/knapper (1,2,3,4,5). Det har jeg funnet massevis av på nettet, men jeg ønsker i tillegg at det skal komme en tekst under hver av bildene.

 

F.eks:

La oss si at jeg har 5 bilder. Katt, hund, mus, hest, fugl. Disse vil jeg kunne slide ved eventuelt trykke på bildene, eller en slags scrollbar med enten navn eller nummer, eller piler. Samtidig ønsker jeg at det skal komme en slags tekst under hver av bildene. F.eks en faktatekst om de forskjellige dyrene.

 

Jeg kan gjøre det veldig enkelt og bare opprette en underside for hver av dyrene, men når du skal navigere, ønsker jeg denne fine animasjonen/sliden.

 

Jeg har sett mange løsninger på nettet, men det gjelder for det meste bare bilder. Som sagt, har jeg veldig lite peiling på JavaScript, og har derfor ikke nok kunnskaper til å modifisere en kode. Jeg lurte på om noen av dere har peiling?

[FrankBjarne]

JQuery gjør jo dette veldig lett ja.

 

http://www.madrefsa.com/jqueryslider/

 

Det er vel noe slikt du mener?

[Tesio]

Jupp! Den der er ganske fin, men er det mulig å få plassert teksten under bildet f.eks? Legge på noen buttons som kan connecte seg til bildene?

[FrankBjarne]

Jeg kan legge ut koden jeg har brukt. Så kan jeg forklare hvordan det fungerer.

 

http://www.mediafire.com/?1tjckq7k7t1jd0d

 

Det eneste du trenger å endre på er HTML koden. Det eneste du trenger i HTML koden for denne slideren er div'en "slider". Slik den fungerer er at du har en unordered list hvor alt som skal i slideren ligger. For å legge til eller fjerne ting fra slideren legger du til eller fjerner du "li" items mellom <ul></ul> taggene.

 

Så i <li> taggene kan du da legge til nye div'er, text og alt du ønsker. Du kan enkelt endre størrelsen på slideren via css koden ved at du endrer "slider" sin width og height.