Maak een afbeeldingsschuifregelaar met JQuery voor een web

We gaan een slider maken die is ontwikkeld met Jquery Y Nivo-schuifregelaar, zonder dat er een plug-in nodig is en die we kunnen aanpassen aan onze website.

Om dit te doen gaan we gebruik maken van de JQuery-framework, wat een is bibliotheek om het werken met de Javascript-taal te vergemakkelijken. We downloaden de bibliotheek van jquery.com, het is ook mogelijk dat je het kunt gebruiken door eraan te trekken googleapis.com gebruik deze code in uw html-pagina om dit script toe te voegen.

Als je het hebt gedownload van de JQuery-pagina en het hebt geüpload naar een map op je website, moet je het naar je domein laten verwijzen, zoals in het volgende voorbeeld:

Laten we nu downloaden Nivo-schuifregelaar wat is de JQuery-bibliotheek waarmee we de schuifregelaar kunnen maken. Hier kun je Nivo slider gratis downloaden. Pak het bestand uit in onze directory, hier kunnen we de structuur van het web zien.

Nu gaan we een index.html-bestand maken voor onze website, in de header zullen we de bibliotheken en stylesheets plaatsen. We kunnen de JQuery-bibliotheek, de nivo-schuifregelaarbibliotheek en de eigen stijlbladen van Nivo-slider zien, waarna we ze kunnen aanpassen.

Nu gaan we een container maken voor onze afbeeldingen en voor de schuifregelaar, hiervoor en om deze te kunnen tonen, is deze gemaakt in dezelfde index.html (Het kan ook worden gemaakt in een CSS-stijlbladbestand, elke).
We beginnen met de structuur van het web en de schuifregelaar zelf, waarbij we de afbeeldingen invoegen die moeten worden weergegeven en een bericht.

Vervolgens activeren we de nivo Silder-plug-in en sturen deze parameters over het type effect, tijd tussen animatie, pauze tussen afbeelding en nog veel meer die te zien zijn in de Nivo Slider-documentatie.

Laten we eens kijken dat de id is geactiveerd #silder dezelfde waar ik de afbeeldingen definieer, dus als ik meer dan één schuifregelaar wil hebben, moet ik dezelfde structuur repliceren en activeren voor de bijbehorende id.
Het resultaat van het testen van index.html in een browser is:

Hier zien we de tweede dia, hieronder het aantal dia's 1 en 2, en de standaardlinks Vorige (vorige) Volgende (volgende) gaan we de weergave daarvan verbeteren met css.
We kunnen de getallen eenvoudig in opsommingstekens veranderen door naar nivo-silder.css . te kijken

 .nivo-controlNav {text-align: left; opvulling: 0; positie: relatief; z-index: 10; } .nivo-controlNav naar {display: inline-block; breedte: 10px; hoogte: 10px; achtergrond: url (bullets.png.webp) niet herhalen; tekst-inspringing: -9999px; grens: 0; marge: 0 2px; } .nivo-controlNav a.active {achtergrondpositie: 0 100%; } .nivo-directionNav naar {display: block; breedte: 30px; hoogte: 30px; achtergrond: url (pijlen.png.webp) niet herhalen; tekst-inspringing: -9999px; grens: 0; boven: automatisch; onder: -36px; z-index: 11; } .nivo-directionNav a: hover {achtergrondkleur: #eee; -webkit-grens-radius: 2px; -moz-grens-radius: 2px; grensradius: 2px; } a.nivo-nextNav {achtergrondpositie: 160% 50%; rechts: 0px; } a.nivo-prevNav {achtergrondpositie: -60% 50%; links: automatisch; rechts: 35px; } 

Het resultaat van deze wijziging zijn de cijfers als opsommingstekens naar links en de links als pijlen naar rechts.

We gaan de functionaliteit uitbreiden door een gegevensblok in een van de dia's te tonen

Door de code aan te passen die we al hebben, veranderen we de alinea in dia 2 voor een blok dat ik zal aanroepen met een id # block2, dan maak ik het blok en pas ik een verborgen stijl toe zodat deze alleen zichtbaar is wanneer dia 2 is geactiveerd.
Het resultaat is als volgt:

U kunt ook miniatuurafbeeldingen plaatsen. Een andere optie is om de inhoud dynamisch te genereren vanuit een mysql en php of deze te gebruiken in een CMS-sjabloon zoals joomla of wordpress. Het wordt geleverd met veel plug-ins die al zijn geprogrammeerd, maar met een paar regels code kunnen we onze eigen component maken. Ik hoop dat het je van dienst is geweest.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven