jQuery slider maken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Fullstack developer (NodeJS, React, AWS)

Functie Als Fullstack developer kom je te werken in het ontwikkelteam, maar zoals gezegd komt er veel meer bij kijken dan alleen maar ontwikkelen. Je bent samen met je collega’s continu bezig om de software uit te breiden maar hiernaast doe je doorlopend onderzoek naar de inzet van bijvoorbeeld Machine Learning. Ze willen met hun software echt voorlopen op andere en toegevoegde waarde leveren voor de eindgebruiker. Mede hierom zijn ze erg benieuwd naar iemand zijn persoonlijkheid, of hij graag nieuwe dingen uitzoekt (Google!), en initiatief neemt. Maar waar staan ze nu? Na een onderzoeksfase van ruim een jaar zijn

Bekijk vacature »

Medior Java developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Senior Mobile Developer

Sogeti is een organisatie met een goede werksfeer en zo min mogelijk hiërarchische verhoudingen. Ga je bij ons als Senior Mobile Developer aan de slag? Dan werk je dagelijks met collega’s aan de mooiste IT-projecten. Deze snelgroeiende groep collega’s krijgt energie van hun vak en dat merk je op de werkvloer. Onze klantenkring is groot en divers, dat vraagt om flexibiliteit van jou. Tegelijkertijd betekent dit dagelijks nieuwe dingen leren én dat geen werkdag hetzelfde is. Natuurlijk krijg jij de mogelijkheid je te certificeren. We organiseren regelmatig technische Meet-ups en doen we veel aan kennisdeling waarbij iedereen welkom is, zowel

Bekijk vacature »

SQL database developer

Functie omschrijving Voor een softwarebedrijf gespecialiseerd in het ontwikkelen van logistieke software in omgeving Tilburg zijn wij op zoek naar een ervaren SQL database developer. Je gaat werken aan uitdagende, complexe projecten. Iedere klant/project betekent maatwerk in de database. Jouw werkzaamheden zullen er als volgt uit zien: Je bent verantwoordelijk voor de gehele ontwikkelstraat. Van architectuur tot ontwikkeling Je gaat je bezig houden met het ontwerpen en ontwikkelen van MS SQL server databases. Je gebruikt hiervoor T-SQL als programmeer laag. Je begeleidt als lead developer de projecten bij klanten van A – Z. Je sluit aan bij meetings met klanten,

Bekijk vacature »

Java developer

Als Java Developer bij Sogeti ben je onderdeel van onze toonaangevende community die bestaat uit ruim 100 gepassioneerde professionals. In teamverband lever je mooie prestaties. Daarmee draag je aan bij de meerwaarde die wij leveren aan onze klanten. Geen werkdag is hetzelfde, je bent voortdurend bezig met het oplossen van allerlei complexe vraagstukken binnen bedrijfskritische systemen. Een voorbeeld hiervan is een cliënt-volgsysteem bij Reclassering Nederland. Andere klanten waar wij onder andere voor werken: KPN, Philips, Nationale-Nederlanden, Kamer van Koophandel, ABN AMRO, Bovemij, Arval en de Politie. Werken bij Sogeti Nieuwe ontwikkelingen volgen we op de voet en delen we binnen de

Bekijk vacature »

Back end developer PHP

Functie Met een complex en uitgebreid e-commerce platform, een eigen PIM-systeem en eigen scan applicatie – krijg jij dagelijks te zien hoe jouw werk gebruikt wordt door miljoenen gebruikers. En we staan qua development pas in de startblokken, aangezien er nog meerdere projecten op de plank liggen te wachten! Ons huidige development team bestaat uit 8 programmeurs. Er wordt dagelijks gereflecteerd op geschreven code, Scrum taken en kennisdelen onderling is een must. Onze voertaal binnen ons team is Engels, dit omdat wij twee internationale collega’s hebben. Ons huidige “IT Landschap” bestaat voornamelijk uit allerlei losse onderdelen die individueel, maar ook

Bekijk vacature »

Software Developer Java

Java/Kotlin Developer Ben jij een ervaren Java/Kotlin developer met een passie voor het automatiseren van bedrijfsprocessen? Wil je graag deelnemen aan uitdagende projecten bij aansprekende klanten? En ben je op zoek naar een professioneel, ambitieus en dynamisch bedrijf om je carrière verder te ontwikkelen? Kom dan ons team bij Ritense in Amsterdam versterken! Zo ziet de functie eruit: Als Java/Kotlin developer bij Ritense ben je verantwoordelijk voor de ontwikkeling en implementatie van applicaties die bedrijfsprocessen automatiseren, zodat onze klanten slimmer, efficiënter en klantgerichter kunnen werken. Als developer ben je in de lead en zorg je voor de correcte oplevering van

Bekijk vacature »

C# Developer

Dit ga je doen De requirements in kaart brengen van de klant; Implementeren van functionele en technische specificaties bij opdrachtgevers; Oplossen van bugs; Meewerken aan maatwerksoftware voor nieuwe opdrachtgevers; Het testen en uitleveren van nieuwe functionaliteiten naar de acceptatie en productieomgeving De database ontwikkelen en onderhouden; Hier ga je werken Onze klant is gevestigd in het westen van Nederland en is gespecialiseerd in het ontwikkelen van software voor de levensmiddelen industrie. De software die het team maakt optimaliseert voornamelijk de administratieve processen, maakt deze meetbaar en zorgt ervoor dat de data zo goed mogelijk gebruikt kan worden. Binnen een van

Bekijk vacature »

Front-end Developer vue.js node.js SaaS

Dit ga je doen Het ontwikkelen van nieuwe features die bijdragen aan de groei van de klanten van de organisatie; Je denkt mee over nieuwe innovaties, features en verbeteringen in de applicatiearchitectuur; Je draagt bij aan de continue ontwikkeling van jouw team doordat je elke dag streeft naar het verbeteren van jouw eigen prestaties; Je neemt actief deel aan Scrum meetings en de Frontend Guild. Hier ga je werken Voor een snel groeiend bedrijf de regio Nieuw Vennep zijn wij opzoek naar een ervaren Front-end Developer. De organisatie is actief in de e-commercebranche en ontzorgt haar klanten middels een SaaS-platform.

Bekijk vacature »

C#.NET Developer Jr. Functie

Functie omschrijving Bouw jij graag aan applicaties om processen in distributiecentra te optimaliseren? Wij zijn op zoek naar een C#.NET ontwikkelaar in regio Breda die hier graag een steentje aan bijdraagt! Jouw werkzaamheden zullen er als volgt uitzien: Je krijgt veel vrijheid in de keuze van de technieken die je gaat gebruiken. Uiteraard wel binnen de gestelde kaders, en door gebruik te maken van het .NET platform. Je gaat aan de slag met de ontwikkeling van een nieuwe module binnen de WMS suite van dit bedrijf. Deze "carrier" module gaat er voor zorgen dat de selectie van een vervoerder volledig

Bekijk vacature »

Software Developer C# .NET

Functie omschrijving Zoek jij een nieuwe uitdaging binnen development waar je komt te werken binnen een flexibel, jong en ondernemend bedrijf? Wij zijn voor deze functie op zoek naar een C# .NET Developer die enthousiast wordt van het aansluiten en begeleiden van (complexe) nieuwe klanten. Verder begeleid je complexe projecten, ben jij iemand die altijd kansen ziet? Dan zoeken wij jou! Verder ga jij je bezighouden met: Het verbeteren van functionaliteiten binnen het dataplatform; Meedenken in oplossingsrichtingen; Werken aan de architectuur; Ontwikkelen van nieuwe technologieën. Bedrijfsprofiel Waar ga je werken? De organisatie waar je voor gaat werken heeft een onafhankelijk

Bekijk vacature »

.NET developer

Functie Als junior .NET ontwikkelaar ga jij aan de slag in één van de 5 IT teams van dit bedrijf. Jullie werken op basis van interne klantprojecten aan voornamelijk webapplicaties. Dit betekent dat jij continu uitgedaagd wordt en veelal met verschillende soorten projecten bezig bent. Het gave is dan ook dat jullie als team samen bekijken welke technieken het beste passen bij het project waar jullie verantwoordelijk voor zijn. Zo kan het zijn dat jij als .NET developer gaat werken aan een project, maar dat jullie als team liever gebruik maken van Haskell of F# om de klus te klaren.

Bekijk vacature »

Software programmeur

Functieomschrijving Voor een erkende werkgever in de regio van Goes zijn wij op zoek naar een enthousiaste software programmeur met PHP/Symfony ervaring. Een gedreven persoon die het development team komt versterken met het aanpakken van complexe projecten. Ben jij op zoek naar een baan met veel uitdaging binnen een snelgroeiend e-commerce bedrijf, waar je de tijd en ruimte krijgt voor zowel professionele als persoonlijke groei? Lees dan snel verder! Dit ga je doen: Beheer en ontwikkeling van de serviceportal in Symfony en de webshops in de tweede versie van Magento; Testen en door ontwikkelen van software; Ontwikkelen van nieuwe functionaliteiten;

Bekijk vacature »

T-SQL Database developer

Functie omschrijving Ben jij een ETL database specialist? Houd jij ervan om te puzzelen met Databases, Query's & Stored procedures? Zoek jij uitdaging, vrijheid en verantwoordelijkheid? Zoek dan niet verder! Wij zijn per direct op zoek naar medior en senior database developers. Je gaat werken voor een relatief klein softwarebedrijf in omgeving Tilburg. Samen met 12 collega's (allemaal techneuten), ga jij je bezig houden met het bouwen en/of onderhouden van database software. Deze software wordt internationaal ingezet voor het automatiseren van logistieke processen. Jouw werkzaamheden gaan er als volgt uit zien: Je bent in een klein team met developers, verantwoordelijk

Bekijk vacature »

PHP Developer

Dit ga je doen Ontwikkelen, implementeren en testen van PHP-oplossingen en Apps voor klanten en bedrijfsprocessen; Opstellen van requirements en uitwerken van de oplossingen; Testen van software en borgen van een soepele overdracht, inclusief documentatie; Proactief adviseren vanuit eigen expertisegebied over ontwikkelingen en verbeterpunten in technische toepassingen en processen binnen de organisatie. Hier ga je werken De organisatie is een ambitieuze en vooruitstrevende speler in de markt in de regio Rotterdam. Ze zijn de snelst groeiende in hun branche. Met een excellent aanbod en service willen zij de beste keuze zijn voor hun bestaande en nieuwe klanten. Dit alles doen

Bekijk vacature »
Machiel K

Machiel K

22/12/2014 22:10:23
Quote Anchor link
Hai. Ik ben een slider aan het maken, met drie slides. Hieronder de jQuery code, en de bijhorende HTML code.

JQUERY
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// Kijken of de muis op de slider staat of niet

shover = false;

// Als het wel zo is, aangeven dat het zo is
$( "#slider" ).mouseenter(function () {
    shover = true;
});

// Als het niet zo is, aangeven dat het niet zo is
$( "#slider" ).mouseleave(function () {
    shover = false;
});
          

var huidige = 1;
var volgende = 2;
                
setInterval(function () {

    // Alleen uitvoeren als de muis van de slider af is
    if(!shover) {
            
        var volgende = huidige;
        volgende++;
                
        var volgende = "." + volgende;
                
        $( "#slider .part" ).stop().fadeOut(500);
        $( volgende ).stop().fadeIn(300);
                
        huidige++;
            
        if(huidige == 3) {
            huidige = 0;    
        }
                        
    }

}, 5000);


HTML
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="slider">
    <div class="part 1">
        <ul>
            <li class="actief" name="1"></li>
            <li name="2"></li>
            <li name="3"></li>
        </ul>
    </div>
    <div class="part 2">
        <ul>
            <li name="1"></li>
            <li class="actief" name="2"></li>
            <li name="3"></li>
        </ul>
    </div>
    <div class="part 3">
        <ul>
            <li name="1"></li>
            <li name="2"></li>
            <li class="actief" name="3"></li>
        </ul>
    </div>
</div>


De UL in de verschillende "parts", laat ik zien of het part 1, 2 of 3 is door middel van de class actief.
Nu wil ik deze list items aanklikbaar maken, en dat je vervolgens naar deze slide gaat. Als de 5 seconden van die slide weer om zijn, moet hij weer naar de volgende (of terug naar het begin als hij bij de derde slide is).

Er is vast een veel slimmere manieren dan in elke "part" een UL te zetten.

Kan iemand mij helpen om 3 bolletjes in de slider te zetten, die aangeven in welke slide "je zit". En als je er vervolgens op een klikt, ga je naar deze slide, en gaat hij vanaf hier weer verder.

Hopelijk is mijn uitleg/beschrijving een beetje duidelijk..

Groet.
Gewijzigd op 22/12/2014 22:12:53 door Machiel K
 
PHP hulp

PHP hulp

24/04/2024 04:42:43
 
Frank Nietbelangrijk

Frank Nietbelangrijk

22/12/2014 23:32:09
Quote Anchor link
Ik ga er vanuit dat je dit voor studie doeleinden doet want internet zit barstensvol met allerlei sliders die precies doen wat je wil.

Ik zie absoluut niet het nut van die <ul>'s. Je kunt wel een <ul> maken met daarin een snelkoppeling naar foto's en eventueel een title tag.
<ul class="slider"><li><img="plaatje.png" title="pannekoek"><li></ul> Hier is plaatje.png dan je eerste en enige foto die je gaat laten sliden. Met javascript lees je alle urls en titles uit waarna je de complete <ul> vervangt voor je slider.

Die drie bolletjes kunnen natuurlijk op een aantal manieren gemaakt gemaakt worden. Ook dit is gewoon HTML eigenlijk. zet ze in een <a> om te zorgen dat ze aangeklikt kunnen worden en vang de klik weer op met javascript.

Het is allemaal zo basic eigenlijk..
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.