Loop in jquery code
Met behulp van wat tutorials heb ik een fadeslide gemaakt.
De slider stopt bij de tweede foto, kan iemand mij helpen wat er nu verkeerd gaat?
Link JSFiddle
Gr. Jop
Gewijzigd op 28/08/2015 00:09:51 door Jop B
Daarnaast weet ik niet of .addClass('active').removeClass('active'); een netto effect heeft :).
Ik zou eens kijken welke elementen je nu precies selecteert, dat verschaft wss wel enig inzicht.
Ontdoe de slider in eerste instantie ook van alle effecten, dat is alleen maar "clutter" bij het opzetten van de algehele structuur.
QUOTE:
Daarnaast weet ik niet of .addClass('active').removeClass('active'); een netto effect heeft :).
Je zat er niet ver naast.
@Jop
De fout zit hem dat je eerst een class 'active' plaatst en daarna hem gelijk weer verwijdert, dus je moet even deze regel veranderen:
Code (php)
1
next.fadeIn(fadetime).addClass('active').removeClass('active');
Naar:
Code (php)
1
next.fadeIn(fadetime).addClass('active');
Edit: Kleine tip: () is niet nodig in dit geval, dus:
Code (php)
1
var fadetime = (8000);
wordt zo:
Code (php)
1
var fadetime = 8000;
Gewijzigd op 28/08/2015 03:54:23 door DavY -
Dank voor het meedenken. Vanmorgen heb ik een andere code gemaakt
Code (php)
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
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
function paraslide(){
var $active = $('#slider img.active');
if($active.length == 0) $active = $('#slider img:last');
var $next = $active.next().length ? $active.next():$('#slider img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0}).addClass('active').animate({opacity:1.0}, 2000, function(){
$active.removeClass('active last-active');
})
}
$(document).ready(function(){
var timer = 4000;
setInterval("paraslide()", timer);
$('#slider').hover(function(){
clearInterval("paraslide()", timer);
});
$('#slider').hover(function(){
$('#prev, #next').stop().fadeIn(1000)}, function(){
$('#prev, #next').stop().fadeOut(1000)});
});
var $active = $('#slider img.active');
if($active.length == 0) $active = $('#slider img:last');
var $next = $active.next().length ? $active.next():$('#slider img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0}).addClass('active').animate({opacity:1.0}, 2000, function(){
$active.removeClass('active last-active');
})
}
$(document).ready(function(){
var timer = 4000;
setInterval("paraslide()", timer);
$('#slider').hover(function(){
clearInterval("paraslide()", timer);
});
$('#slider').hover(function(){
$('#prev, #next').stop().fadeIn(1000)}, function(){
$('#prev, #next').stop().fadeOut(1000)});
});
Nu zou ik nog twee dingen willen, stop inteval als er een hover plaats vind en als er op de buttons word geklikt dat er een functie aan hangt slide terug en slide vooruit.
Het eerste heb ik zelf al geprobeerd, maar werkt niet.
Kunnen jullie mij opweg helpen hiermee?
Alvast dank.
Gr. Jop
Dank voor de reactie. Hierbij zend ik een nieuwe fiddle met een nieuwe code.
Het stoppen van de slider d.m.v. een hover is gelukt!
wat ik niet voor elkaar krijg is om de buttons vorige slide en volgende slide te coderen in jquery. Hier zou ik graag een zetje in de rug bij willen hebben.
de Fiddle
gr. Jop