Share
jQuery-schuifregelaars bieden een eenvoudige, elegante manier om inhoud weer te geven zonder waardevolle vastgoed op uw webpagina op te geven. Ze zijn enorm populair geworden en kunnen op verschillende manieren worden gebruikt. Laten we de populaire stijlen bekijken, een slider kiezen en een integreren in een demosite.
Ooit had een afbeelding op het web maar één manier om te verschijnen: als een platte JPG, GIF of PNG. Enige jaren geleden begonnen beelden nieuwe trucjes te leren; Ze groepeerden zich en kwamen in jQuery-schuifregelaars naar het applaus van bezoekers rondom.
Sindsdien hebben ze een overvloed aan nieuwe trucs geleerd die ze tot het belangrijkste materiaal voor elke webontwerper maken. Of je ze nu al eerder hebt gebruikt of niet, deze tutorial geeft je inzicht in de verschillende smaken van schuifregelaars, wanneer je ze in een ontwerp gebruikt en we begeleiden je zelfs door een installatie van één.
Als er één ding is dat jQuery-schuifregelaars niet hebben, is het een consistente naam. De schuifregelaar wordt gebruikt voor een breed scala aan aliassen: galerij, carrousel, promo's en rotators, maar ze bieden allemaal dezelfde algemene functie: meerdere items weergeven in een gedeelde ruimte op de pagina. Voor de toepassing van dit artikel zal ik naar hen allen verwijzen als een "schuifregelaar".
jQuery-schuifregelaars kunnen worden gebruikt voor bijna alles behalve de meeste worden gebruikt om een aantal foto's in een diavoorstelling-indeling weer te geven op een manier die voorheen werd behandeld door Adobe Flash. Velen bieden een aantal overgangseffecten tussen dia's en kunnen worden bestuurd door vorige / volgende knoppen, navigatie met tabbladen of miniatuurweergave.
Het aantal en de verscheidenheid aan schuifregelaars blijft gestaag groeien, dus het vinden van een schuifregelaar die aan uw behoeften voldoet, was nog nooit zo eenvoudig. Ze zijn er in alle soorten, maten en maten - een aantal is gratis, wat betekent dat wanneer je voor een slider betaalt, deze meestal vol zit met geweldige functies.
Laten we een aantal van de meer populaire stijlen van schuifregelaars hieronder bekijken. Houd er rekening mee dat de meeste voorbeelden uit de niet-gestileerde demoversies zijn en dat ze allemaal kunnen worden aangepast met wat basiskennis van CSS en het lezen van de documentatie.
Een zeer populaire schuifregelaar is de fotoslider. Velen accepteren een afbeelding en sommige metadata zoals een bijschrift, vaak automatisch uit het alt- of title-label gehaald.
voordelen: Typisch het gemakkelijkst om mee te beginnen voor beginners. De focus ligt direct op een grote afbeelding die u kiest. Velen hebben meerdere overgangseffecten tussen dia's van glijden, vervagen, zoomen en meer.
nadelen: Als je een grote verscheidenheid aan inhoud hebt die je moet weergeven, zoals HTML, afbeeldingen of video, is een schuifknop met gemengde inhoud een betere keuze - je moet je meestal aan de afbeeldingen houden.
Hoewel je met schuifregelaars voor gemengde inhoud vergelijkbaar bent met de fotoslider, kun je meer dan alleen afbeeldingen gebruiken. Bekijk alle opties bij het kiezen van een afbeeldingschuif, sommige staan wel HTML toe, maar worden mogelijk niet weergegeven in de lijst met primaire functies.
voordelen: Perfect voor weergave van video-, HTML- en beeldinhoud binnen dezelfde schuifregelaar indien nodig.
nadelen: Schuiven met gemengde inhoud kunnen iets geavanceerder zijn om mee te werken dan met uw standaard fotoslider.
De galeriestijl wordt vaak gebruikt in fotografietoepassingen. De navigatie bestaat vaak uit miniaturen om door de afbeeldingen in uw verzameling te bladeren.
voordelen: Zeer gemakkelijk voor gebruikers om door de afbeeldingen te bladeren die ze snel willen zien.
nadelen: Vaak neemt de tijd meer onroerend goed op de pagina in beslag dan een standaardschuiver om in de afbeelding en alle miniaturen te passen.
Denk aan een Rubiks kubus, gebouwd op het web, zonder alle hoofdpijn. Dat is eigenlijk wat een 3D-blokslider is - het is ongelooflijk indrukwekkend vanuit een visueel standpunt, en kan perfect zijn om dat extra beetje opwinding aan een site toe te voegen.
voordelen: Een van de meest visueel verbluffende sliders die er zijn. Als bezoekers het niet eerder hebben gezien, kunnen hun kaken de grond raken.
nadelen: Hoewel de rest van de schuifregelaars in deze tutorial jQuery zijn, zijn de meeste 3D Block Sliders ingebouwd in een combinatie van Adobe Flash en XML ... wat niet het meest "standaardvriendelijke" formaat is om te gebruiken. Deze schuifregelaars kunnen iets meer tijd nodig hebben om te "voorladen"; Omdat ze zijn gemaakt met Flash, betekent dit ook dat ze een beetje lastiger kunnen worden geïnstalleerd als u er niet bekend mee bent.
Geïnspireerd door het coverflow-effect van Apple is dit schuifeffect een prachtige manier om uw werk weer te geven. In combinatie met een site met een minimale stijl, kan deze schuifregelaar zich thuis voelen.
voordelen: Deze stijl kan een zeer indrukwekkende en zeer interactieve manier zijn voor gebruikers om door een afbeeldingengalerij met uw werk te bladeren.
nadelen: Velen hebben een kleine schuifbalk of gebruiken het scrollwiel of het toetsenbord van de muis om de afbeeldingen te bekijken die een beetje onhandig kunnen zijn door onbedoeld scrollen.
De schuifregelaar op volledige grootte is wat het lijkt: een schuifregelaar die de hele pagina in beslag neemt om te pronken met je werk op een manier die je niet kunt missen.
voordelen: Als je een "go big go-of-go-home" -stijl hebt, worden ze echt niet veel groter dan dit.
nadelen: Ze kunnen een beetje moeilijk zijn om te integreren in een site, omdat ze zijn ontworpen om het scherm te vullen met je werk. Gebruikte afbeeldingen moeten vrij groot zijn om nieuwe schermen met hoge resolutie te vullen.
Soms bevindt u zich mogelijk in een situatie waarin u een raster met afbeeldingen wilt weergeven en snel wilt bladeren zonder dat de gebruiker een tweede of derde pagina laadt.
Sommige schuifregelaars hebben de mogelijkheid om meerdere afbeeldingen per dia of meerdere dia's tegelijk weer te geven, dus controleer de lijst met functies. In bovenstaande jCarousel Lite is "visible" ingesteld op 3, waarbij drie dia's tegelijk worden getoond.
voordelen: Hiermee kunt u meerdere items tegelijk scrollen voor tijden dat een grote afbeelding of inhoud niet nodig is. Geweldig voor groepen items of wanneer u de ruimte op de site hebt.
nadelen: Er zijn niet veel nadelen aan deze stijl, behalve dat het een beetje ingewikkelder is om in te stellen dan de standaard fotoslider.
De accordeon-stijl maakt het bladeren door aanbevolen items een beetje als bladeren door pagina's van een boek. Dit gebruikt een klassiek "verbergen en onthullen" gebruikersgedrag door slechts een fragment van de inhoud weer te geven voordat de volledige accordeonkist eruit wordt geschoven.
voordelen: Een zeer unieke en leuke manier om uw items weer te geven. De getrapte stijl kan helpen een gevoel van orde te versterken als u een inhoud-paradigma van "stap 1, stap 2, stap 3" gebruikt.
nadelen: Niet zo handig voor tientallen dia's en het kan een beetje moeilijk zijn voor nieuwe internetgebruikers om per ongeluk met een muis over het scherm te schuiven. Overweeg een klik om de tabstijl of instelling te openen, indien beschikbaar.
Het gevoel dat je krijgt als je de grote schuifregelaar met tabs gebruikt, is een gevoel van eenvoud - stap 1, stap 2, stap 3. Een geweldige manier om progressieve veranderingen, functies of productopties te tonen.
voordelen: Zeer aandacht trekken met de juiste styling. Net als de accordeon geeft deze schuif een hint van wat er in elke dia zit, wat geweldig kan zijn voor bezoekers die specifieke informatie zoeken.
nadelen: U moet mogelijk het aantal items beperken dat u wilt opnemen, tenzij u een schuifregelaar met tabbladen zoals de iTunes Music Store gebruikt.
Hoewel de variëteit en het aantal schuifregelaars gestaag toeneemt, kunt u soms gewoon geen oplossing vinden voor uw unieke situatie.
Als u veel sliders in uw projecten gaat gebruiken, is het de moeite waard om in te graven en echt te leren hoe ze werken en er zelf een te bouwen. De beste manier om te leren is bijvoorbeeld.
Ontleed bestaande schuifregelaars, kijk hoe ze werken en leer ervan. Steel geen code van een andere ontwikkelaar, maar concentreer je op wat ze doen: animaties, verander de dekking en bekijk de instellingen die ze aanbieden en schrijf het op je eigen manier.
Met tools zoals Firebug kunt u een schuifregelaar in realtime 'inspecteren' en bekijken hoe deze de z-index, opaciteit of positionering manipuleert om inhoud van de ene dia naar de volgende te verplaatsen.
Je krijgt meer inzicht in wat er zich onder de motorkap afspeelt, je kunt aanpassingen uitvoeren en problemen sneller vinden door zoveel mogelijk sliders te gebruiken om te leren hoe ze werken.
Het enige dat overvloediger is dan het aantal jQuery-schuifregelaars, is het aantal sites dat ze weergeeft. In plaats van ze allemaal hier op te noemen (elke week komen er nieuwe uit), laten we dan eens kijken hoe we er een kunnen vinden die bij u past:
Een snelle Google-zoekopdracht zal onthullen dat schuifregelaars op verschillende plaatsen te vinden zijn:
Vaak is er iets zoals "25 bruikbare jQuery-inhoudschuifregenscripts" genoemd - het zijn berichten die zijn gemaakt om de verschillende beschikbare schuifregelaars te verzamelen en te beoordelen. Lees de opmerkingen en het artikel om de mening van andere mensen over de verzameling te bekijken.
Sites die tutorials aanbieden over het bouwen van schuifregelaars bevatten vaak de uiteindelijke broncode van het project, zodat u een stapsgewijze handleiding krijgt over hoe het is gebouwd en het uiteindelijke werkresultaat. Tenzij specifiek vermeld, is het bronproject alleen voor educatieve doeleinden, vraag het voordat u het in een van de projecten gebruikt.
CodeCanyon biedt een volledige categorie voor premium-schuifregelaars. https://codecanyon.net/category/javascript/sliders
Soms kom je een site tegen met een schuifregelaar en wil je zien welke plug-in ze hebben gebruikt. Aangezien JavaScript een client-side script is, een weergavebron van de pagina is en kijkt welke JavaScript-bestanden zijn geïmporteerd, moet de plug-ins worden opgenomen bovenaan het bronscript van de plug-in met een URL voor meer informatie over de plug-in om te downloaden en documentatie.
Wees hoffelijk van de moeite die anderen hebben gedaan, lees en houd u aan de licentie-overeenkomsten die zijn opgenomen en geef de eer waar het krediet verschuldigd is.
Het kiezen van een schuifregelaar is grotendeels afhankelijk van de functionaliteit en opties die u nodig hebt en de algehele stijl waar u voor gaat. Bepaal het type inhoud dat u wilt weergeven, hoe u wilt dat gebruikers er doorheen navigeren en bekijk welke schuifregelaar het beste overeenkomt met uw vereisten.
Nadat u uw keuzes hebt beperkt, vergelijkt u de algehele scriptgrootte en controleert u of deze compatibel is met alle browsers.
Sommige schuifknoppen worden aangeboden in een "lite" -versie, zoals jQuery Cycle Lite, als u de algehele bestandsgrootte in uw project wilt behouden. Vaak mist de light-versie net de extra overgangseffecten en blijft hij bij de meest populaire opties die beschikbaar zijn.
Als je geen jQuery-master bent, kies dan een slider met geweldige live demo's die je kunt downloaden en documentatie om je te helpen bij het maken van je aanpassingen.
Een van de geweldige dingen over het gebruik van een vooraf gemaakte schuifregelaar is dat de meeste van hen ongelooflijk eenvoudig opnieuw kunnen worden ontworpen op basis van uw behoeften. Dit proces (meestal gewoon 'villen' genoemd) is niet zo moeilijk als het lijkt. Gewoonlijk vereist het alleen het bewerken van een eenvoudig CSS-bestand - de meest complexe skinning krijgt meestal grafische afbeeldingen die u hebt gemaakt hun standaardafbeeldingen (zoals achtergronden en knoppen)..
Naast schuifregelaars voor het verwijderen van skins, is het ook de moeite waard om op te merken dat bij de meeste schuifregelaars het formaat eenvoudig kan worden aangepast aan de website die u ontwerpt.
Het plaatsen van een schuifregelaar in een bestaand ontwerp is geen proces in één stap, maar de meeste schuifregisters worden geleverd met een standaard voorbeeldpagina om aan de slag te gaan, waarbij jQuery, CSS, voorbeeldinhoud wordt geïmporteerd en de plug-in met de standaardinstellingen wordt geïnitialiseerd.
Laten we jQuery Cycle importeren in een snelle voorbeeldsite gemaakt met het doel van deze tutorial.
Download de voor en na sites om mee te volgen.
De demosite bestaat uit eenvoudige HTML, CSS en een afbeelding die het startpunt vormt voor de integratie van de schuifregelaar.
We zullen de jQuery Cycle-plug-in voor deze demo integreren.
Importeer de jQuery-bibliotheek en de Cycle-plug-in in de
van uw site door deze code toe te voegen:Het eerste script zou de nieuwste versie van jQuery moeten zijn. Je kunt het van jquery.com pakken of laden vanuit de Google Libraries, zoals we hierboven hebben gedaan.
Het tweede script is de plugin-bron die we in de map / js / hebben geplaatst.
Verwissel de huidige statische sample_water.jpg afbeelding gebruikt op de demosite met een ongeordende lijst voor dia's:
We zullen slechts drie afbeeldingen gebruiken om te beginnen, let op het attribuut, we zullen dit later gebruiken om onze plugin te vertellen dat dit de container van onze dia's is. Omdat de dia's in essentie slechts een lijst met verwante inhoud zijn, is een UL-tag een goede keuze.
Onder de ongeordende lijst met promo's die we hierboven hebben toegevoegd, zullen we de navigatie toevoegen om de dia's te besturen. De plug-in maakt de individuele navigatielinks dynamisch tijdens runtime wanneer u dia's uit de lijst toevoegt en verwijdert.
Volgende dia
De klasse van de volgende schuifknop komt overeen met de 'volgende' parameter die we zullen gebruiken om de dia's handmatig te verplaatsen.
De promo-index wordt automatisch gegenereerd als de parameter 'pager' in de opties is ingesteld. Door het handmatig in te voeren, kunnen we bepalen waar het op de pagina terechtkomt in het geval u het ergens anders zou willen hebben dan waar de plug-in het plaatst.
Laten we CSS toevoegen om de sliderlijst te vormen. Sommige schuifregelaars zoals Nivo Slider hebben een aangepaste stylesheet die u kunt downloaden en aan de slag kunt gaan, maar voor deze demo voegen we onze aangepaste CSS rechtstreeks toe aan het einde van het hoofdscherm.css van de site.
/ * Lijstopmaak verwijderen uit Promo UL / LI * / #promo, #promo li margin: 0; padding: 0; list-style-type: none; / * Stijlen voor de optionele promo-navigatiecontainer * / #promonav opvulling: 4px; achtergrond: #eee; rand: 1px vast # e0e0e0; margin-top: 1px; / * Houd de volgende knop aan de rechterkant * / #promonav .next float: right; / * Link stijlen in promo navigatie * / #promonav a opvulling: 0 3px; border: 1px solid #eee; text-decoration: none; schets: 0; color: # 777; / * Stijl toegepast op mouseover van promo navigation link (s) * / #promonav a: hover color: # 000; / * De index krijgt automatisch een actieveSlide-klasse, gebruik deze om de huidige dia aan te geven * / #promoindex a.activeSlide font-weight: bold; achtergrond: # fff; border-color: #ccc;
Op dit moment hebben we jQuery en de plugin geïmporteerd, maar niets vertelt de plug-in welk element op de pagina onze schuifregelaar is of welke opties moeten worden opgenomen - deze moet worden geïnitialiseerd.
Maak een bestand met de naam setup.js en plaats het in de map / js /.
Importeer het in onder de jQuery- en Cycle-scripts die u hebt geïmporteerd in de
gedeelte van de site eerder in de zelfstudie.Het is belangrijk dat u jQuery, jQuery Cycle en vervolgens setup.js in die exacte volgorde importeert, anders werkt de plug-in niet.
Voeg in setup.js de volgende code toe:
Accentsconagua
$ (document) .ready (function () $ ('# promo'). cycle (fx: 'scrollHorz', time-out: 4000, snelheid: 800, volgende: '#promonav .next', pager: '#promoindex ', hoogte: 200, pauze: 1);); Laat me uitleggen wat er in bovenstaande code staat.
We beginnen door te controleren of het document klaar is met document.ready, anders probeert de plug-in elementen op de pagina aan te passen die niet beschikbaar of gereed zijn.
De volgende regel vertelt de Cycle-plugin welk element we gebruiken als een container van de items waar we doorheen willen fietsen. In ons geval heeft de container een ID van promo, dus we voeren #promo in.
De items die worden genoemd van fx tot pauze zijn opties die we doorgeven aan de plug-in. Als we er geen opnemen en gewoon gebruiken: $ ('# promo'). Cycle (); de plug-in zou de standaardinstellingen gebruiken. Opties worden weergegeven in een door komma's gescheiden lijst. Het aantal en type opties varieert per plug-in, maar voor jQuery Cycle is te vinden op http://jquery.malsup.com/cycle/options.html
De volgende opties en pagineeropties verwijzen naar de navigatie die we in stap 5 hierboven hebben gebouwd en kunnen worden verwijderd als u geen navigatie op de schuifregelaar wilt opnemen.
Download de voor en na sites om mee te volgen.
Sliders hoeven geen grote fotosliders te zijn die zich uitstrekken over een pagina van uw site. Gebruik ze om delen van roterende inhoud weer te geven, zoals getuigenissen, uw laatste tweets of populaire blogartikelen in delen van de site die kunnen profiteren van de extra ruimte.
Bedankt voor het lezen!
