Image slider

Tags:    html css

<< < 12 > >>
Hejsa

Skal bruge en image slider der er gratis og har rodet med 5-6 forskellige og tænker det må sku være nemmere.
Kan det virkeligt passe at noget så ordinært som at få en imageslider skal være bøvlet med så stort et udvalg derude?

De fleste siger smæk en css fil ind, en js fil ind, lav en ul, med li'er i og så dit indhold, kør et script med en slider.start() og så er den hjemme. Desværre gør langt de fleste af dem bare ikke det ud af boxen som de lover!

Så er nogle der altid går 1-5 pixels ud over sidens størrelse som så gør at der kommer scrollbar på i bunden.
Nogle der er billederne altid forskubbet lidt i venstre side, så første billede har et tomrum i venstre side ved siden af billedet, billede to har de sidste 15-20 pixels af forrige billede i det tomrum der var ved billede 1.
Andre fungerer bare af røv til at skalere til at passe fuldt ud til sidens størrelse.
Nogle mener altid de skal ligge sig som øverste element på siden så den fortsætter hen over andre elementer når man scroller på siden.
Andre sætter aldrig i gang med at slide og viser bare et billede.
Nogle slider, men første billede der er har en højde på 2 pixels indtil billede 2 loades og så fyldes indholdet korrekt ud og når man så går tilbage til billede 1 ser det rigtigt ud.
Listen fortsætter..

Derfor jeg kommer her med spørgsmål til hjælp til en imageslider.

Det den skal kunne:
- Fylde hele sidens bredde dynamisk (altså ikke nogen pixel størrelser for hvis siden er en anden størrelse skal den strække sig og fylde hele bredden, men kun en hvis højde. Dermed sagt at hvis der strækkes længere end billedet er, skal det følge bredden og dermed gøre højden tilpas og dermed vil den nederste del af billedet "forsvinde" på grund af den faste højde fordi der vil være overflow:hidden på).
- Meget gerne have de runde navigations "knapper" under billedet så man kan se hvilket billede man er nået til
- Autoplay skal der være
- Play/Stop/Pause -knapper skal ikke vises
- Højre og venstre knapper er dejlige, men det foretrækkes at de først kommer på når man peger på slideren.
- Den kan gå i infinite loop hvor den fra sidste billede nu slider videre på første billede - UDEN at skulle udføre slider funktionen bagvendt og slide alle billeder tilbage igen for at begynde forfra (er oplevet før)
- Opsætning i koden skal være nem, og overskuelig så fx div med en ul og li indeni med noget indhold ville være ret lækkert. Ikke dem hvor de skal have 1000 klasser, og hedde slider_container med li'er med div i der hedder slide_1_start, Slide_2, Slide 3.
- Som udgangspunkt skal der kun være billeder i den nu, men hvis det er muligt selv at lave sit indhold ville det være en fordel. Så hvis jeg kan lave knapper, og tekster ovenpå mit billede selv og den så bare slider det hele nemt ville være ret fint.
- Transitions - enten fade eller være slide fra højre mod venstre.

Billedresourcer til eksempler (gerne jsfiddle):
http://unslider.com/img/sunset.jpg
http://unslider.com/img/wood.jpg
http://unslider.com/img/subway.jpg
http://unslider.com/img/shop.jpg
http://placehold.it/350x150&text=FooBar3



11 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma
Sorter efter stemmer Sorter efter dato
Hej csharper
Jo jeg var også igennem flere forskellige "plugins" og prædefinerede løsninger, da jeg ville lave en fremviser til billeder - eller rettere sagt tegneserier.

Tror jeg brugte minimum en uge på at få det til at fungere, og så efterfølgende nye knapper til "frem" og "tilbage" og meget mere - link her http://www.kenderdumig.dk/grafik/tegninger/knallert.html

Problemet med fremvisning af billeder er ofte, at størrelsen af billederne varierer - måske er det ene meget bredere end det næste, og det er ar derfor nødvendigt at dykke ned i CSS og definere nogle retningslinier for højde ELLER bredde som gælder alle billederne fx:

img {
width: 100%;
]

Skal fremviseren også fungere responsivt afhængigt af størrelsen på viewport, skal der tages hensyn til dette også. Og er der tekst på billederne - som i tegneserier - kræver det yderligere at bibeholde samme tekststørrelse på alle billeder.

Når man bruger en prædefineret løsning skulle man mene, at der allerede er taget højde for den slags ting, men desværre kræver især gratis løsninger ofte, at man selv modificerer koden til sit eget projekt - og det kræver - som Michael skriver - fordybelse og detektivarbejde og en masse tests at få tingene til at fungere præcis som man havde tænkt sig.

Men når det endelig lykkes og er færdigt er det jo fantastisk - hvilket måske er essensen af webudvkling.







<< < 12 > >>
t