jQuery slider maken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

.Net Front-end Ontwikkelaar

Wij zoeken een .Net Front-end Ontwikkelaar! Omschrijving Kun jij snel schakelen en ben je stressbestendig? Dan zoeken wij jou! Als .Net Front-end Ontwikkelaar help je mee aan de webapplicatie die over de hele wereld door allerlei bedrijven wordt gebruikt. Je werkt daarnaast mee aan nieuwe en verbeterde functionaliteiten en helpt met het oplossen van bugs. Over de opdrachtgever Je komt te werken in een ambitieus team dat zich blijft ontwikkelen. Dit is alle informatie die we nu kunnen delen over de werkplek. Als jij de .Net Front-end Ontwikkelaar bent voor deze job, vertellen we je snel nóg meer. Eisen Heb

Bekijk vacature »

Dynamics Ontwikkelaar

Dit ga je doen Ontwikkelen van Dynamics 365 voor de interne uitrol; Samen met de consultants sparren met klanten over de wensen en eisen; Ontwikkelen van Dynamics 365 voor verschillende grote klanten; Technische analyse en testen; Meedenken over het gebruik en de richting van Dynamics binnen de organisatie. Hier ga je werken Onze opdrachtgever, gevestigd in regio Eindhoven, levert een compleet dienstenpakket op het gebied van IT. Zij pakken verschillende (complexe) vraagstukken van grote organisaties op. De sfeer intern is gezellig en informeel. Men houdt van hard werken maar gezelligheid door middel van een borrel of gezamenlijke lunch komt er

Bekijk vacature »

Software Developer PHP JavaScript Python HBO SQL

Samengevat: Wij zijn een softwarebedrijf voor Autodealers. Ben jij een Medior of Senior Software Developer? Heb je ervaring met PHP, JavaScript of Python? Vaste baan: Java.Developer Software HBO €3.000 - €5.200 Bij ons op de werkvloer is er een positieve en informele sfeer. Naast een goede begeleiding en een enthousiaste klantenkring biedt deze werkgever een prettige omgeving met zeer afwisselende werkzaamheden. Houd jij van aanpakken en denk je dat je deze uitdaging aankunt? Dan zoeken wij jou! Zij werken voor grote klanten. Zij doen omvangrijke projecten die we bij deze werkgever op kantoor realiseren (geen detachering). Zij werken met state-of-the-art

Bekijk vacature »

Senior PHP Developer

As a Senior PHP Developer at Coolblue, you ensure that our webshops work as optimal as possible and you choach other colleagues on the hard and soft skills. How do I become a Senior PHP Developer at Coolblue? As a PHP Developer you work together with other development teams to make our webshop work as optimal as possible and to make our customers happy. Although you are a PHP Developer, you are not averse to a little TypeScript or other technologies that might be used. Would you also like to become a PHP Developer at Coolblue? Read below if the

Bekijk vacature »

Junior .NET Software Developer

Dit ga je doen Software development met behulp van C# .NET en / of PHP, je mag zelf kiezen waar jij je in wil specialiseren Meedenken over het nieuwe pakket, waar moet het aan voldoen? Unit-, integratie- en diverse andere tests schrijven en uitvoeren Nauw samenwerken met je IT collega's zoals Testers, Developers, DevOps Specialisten en Architecten Jezelf ontwikkelen met behulp van trainingen en cursussen Hier ga je werken Onze klant, een grote speler in de medische sector, is op zoek naar een enthousiaste junior (of meer ervaren) Software Developer die klaar is voor een nieuwe stap in zijn of

Bekijk vacature »

Embedded Developer C++

Functie omschrijving Ben jij op zoek naar een leuke uitdaging als Embedded Developer, zoek dan niet verder! Voor een leuke opdrachtgever in omgeving Rotterdam zijn wij op zoek naar een Embedded Developer die graag met Embedded Devices werkt. Je zult verantwoordelijk worden voor het ontwikkelen en onderhouden van diverse producten. Jouw specialisatie ligt op het vlak van software, hardware en back-end. Dit bedrijf is gespecialiseerd in het ontwerpen van software voor een unieke industrie. Wil jij betrokken worden bij een proces dat loopt van ontwikkeling tot installatie? Waarbij je bezig zult zijn met perfecte systemen die geleverd worden aan binnen

Bekijk vacature »

Cloud Developer

Cloud Developers opgelet! Bij Luminis zijn ze opzoek naar jou. Lees de vacature en solliciteer direct. Luminis is een software- en technologiebedrijf met meerdere vestigingen. Vanuit deze vestigingen werken 200 professionals aan technisch hoogwaardige oplossingen voor klanten zoals KLM, Nike en Bol.com. Ook ontwikkelt Luminis eigen oplossingen op het gebied van cloud, Internet of Things, data intelligence, e-sports en e-learning. Luminis onderscheidt zich door aantoonbaar voorop te lopen in technologie en innovatie. Luminis heeft drie kernpunten die verankerd zitten in alles wat we doen: het omarmen van nieuwe technologie, meesterschap en kennis delen. Functiebeschrijving First things first! Het is belangrijk

Bekijk vacature »

Front-end developer Consultancy in teamverband wer

Functie Het team bestaat uit User Experience designers, Data Scientists en Software Engineers. Momenteel zijn ze op zoek naar een ervaren Front-end of Fullstack developer die samen met de consultants aan de slag gaat om de business requirements te vertalen naar technische oplossingen. Los van het finetunen van extenties, help je bij het configureren van bijvoorbeeld een mobiel bankieren app. Hierin ben je van A tot Z betrokken en zie je bijvoorbeeld ook toe op de uitvoering van testen. Je expertise wordt optimaal benut en je krijgt verschillende kansen om deze uit te breiden door met verschillende innovatieve technologieën aan

Bekijk vacature »

Software Ontwikkelaar

Functieomschrijving In deze uitdagende functie als Software Developer ga je de volgende taken uitvoeren: Maatwerk back-end software programmeren; API koppelingen bouwen; Software optimaliseren voor klanten; Bouwen maatwerk applicaties; Werken met Microsoft stack zoals C#, .NET (Core) en Entity framework; Bedrijfsprofiel Je gaat werken bij een klein softwareontwikkelingsbureau, die maatwerk software bouwt voor klanten door heel Nederland. Dit doen zij al meer dan 20 jaar. Het is van oorsprong een familiebedrijf, opgezet door de eigenaar, die er nog steeds werkt. Het team bestaat vooral uit back-end developers en één systeembeheerder. Je krijgt veel kans om jezelf te ontwikkelen en krijgt tevens

Bekijk vacature »

Software Developer C++ en Perl

Ben je een slimme en enthousiaste universitair opgeleide bèta die graag bij een relatief klein softwarebedrijf wil werken waar de sfeer goed is en eigen inbreng gewaardeerd wordt? Wij, IntelliMagic in Leiden, ontwikkelen technisch hoogwaardige software op het gebied van IT infrastructuur performance analytics. Het type software zorgt voor intellectueel interessante uitdagingen. We ontwerpen de producten zelf en verkopen deze als off-the-shelf software aan grote bedrijven in Europa en de VS. Wij zoeken een ervaren C++ software engineer met kennis van Perl voor een van onze ontwikkelteams. Werkzaamheden Samen met de andere ontwikkelaars specificeren, ontwerpen en implementeren van nieuwe functionaliteit

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 »

Typescript Developer / Cloud platform

Dit ga je doen (Door)Ontwikkelen van het cloud platform; (Door)Ontwikkelen van microservices; Bouwen van nieuwe functionaliteiten; Verbeteringen aandragen voor het cloud platform; Sparren met de business. Hier ga je werken Onze opdrachtgever, gevestigd in regio Eindhoven, levert een compleet dienstenpakket op het gebied van IT. Zij pakken verschillende (complexe) vraagstukken van grote organisaties op. De sfeer intern is gezellig en informeel. Men houdt van hard werken maar gezelligheid door middel van een borrel of gezamenlijke lunch komt er veel voor. Als Typescript ontwikkelaar word je onderdeel van het team gericht op de (door)ontwikkeling van hun eigen cloud platform welke wordt

Bekijk vacature »

Low-Code Expert/Developer: Power Platform Speciali

Bedrijfsomschrijving Als Low-Code Expert/Developer bij ons innovatieve bedrijf, neem je een cruciale rol op je in de creatie, ondersteuning en implementatie van diverse oplossingen met behulp van het veelzijdige Power Platform. Dit platform omvat Power Apps, Power BI, Power Automate, Power Virtual Agent en Azure Logic Apps. Het Power Platform biedt je de mogelijkheid om klanten te voorzien van naadloze integraties door op maat gemaakte oplossingen te creëren die compatibel zijn met (bijna) alle bestaande software-infrastructuren. Dankzij het uitgebreide scala aan toepassingen, krijg je de kans om als architect en projectleider van je eigen oplossing te fungeren. Dompel jezelf onder

Bekijk vacature »

Front-end developer

Functie Als front-end developer kom je te werken in een team van 30 gedetacheerde, en het team is momenteel flink aan het groeien. Je hebt ervaring met het bouwen van complexe bedrijfsapplicaties waar je gebruik maakt van de nieuwste technologieën waarmee jij elke klant omver blaast. Het gaat om uitdagende projecten met een gemiddelde doorlooptijd van 2 jaar. Hierdoor heb jij echt de volledige focus op een project en kun je flinke impact maken. Het team zit boordevol met ervaren developers die samen dezelfde ambitie delen. Aan de hand van opleidingen en trainingen kun je certificaten halen in jouw expertise

Bekijk vacature »

Senior Airport Developer ( System engineer)

De functie Nice to know (you) De nieuwe A-pier wordt de duurzaamste van Schiphol. Als deze af is ligt er 4000 vierkante meter zonnepanelen op het dak. En de toiletten? Die spoelen door met regenwater. we gaan ervoor: het creëren van de meest duurzame en hoogwaardige luchthavens ter wereld. een toekomstbestendig en duurzaam Schiphol. Daar werken we elke dag hard aan in team Development & Sustainability. Jij bent regisseur, expert én aanjager van de ontwikkeling van Schiphol. Connecting your world Hoe maak je de ambities en doelstellingen van Schiphol concreet in een project? De waarde voor Schiphol naar eisen die

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

25/04/2024 04:32:52
 
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.