Jquery slider altijd van rechts naar links
Ik heb een slider gemaakt. Werkt prima. Deze slide van rechts naar links.
Wanneer hij bij de laatste slide is gaat hij helemaal terug naar begin waarbij alle slides worden getoond. (dus van rechts terug naar begin)
Wat ik wil is dat wanneer ik bij de laatste slide ben, hij de eerste slide weer inzet van rechts naar links.
Hier is mijn html + jquery
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="banner_block">
<a href="javascript:void(0);" class="btn back"></a>
<a href="javascript:void(0);" class="btn next"></a>
<ul>
<li>
Dia 1
</li>
<li>
Dia 2
</li>
<li>
Dia 3
</li>
<li>
Dia 4
</li>
<li>
Dia 5
</li>
</ul>
</div>
<a href="javascript:void(0);" class="btn back"></a>
<a href="javascript:void(0);" class="btn next"></a>
<ul>
<li>
Dia 1
</li>
<li>
Dia 2
</li>
<li>
Dia 3
</li>
<li>
Dia 4
</li>
<li>
Dia 5
</li>
</ul>
</div>
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var slideSpeed = 3000;
var animateSpeed = 1000;
$(document).ready(function() {
var interval;
var currentFrame = 1;
var totalSlides = $("#banner_block ul li").length;
var slideWidth = $("#banner_block ul li").width();
var totalWidth = totalSlides * slideWidth;
$('#banner_block ul').css('width', totalWidth);
var navigate = function(direction) {
currentFrame = (currentFrame >= totalSlides ? 1 : currentFrame+1);
leftPos = (currentFrame == 1) ? 0 : ((currentFrame-1) * slideWidth);
$("#banner_block ul").animate({
left: ( '-' + leftPos )
}, animateSpeed);
};
interval = setInterval(function() {
navigate("next");
}, slideSpeed);
});
var animateSpeed = 1000;
$(document).ready(function() {
var interval;
var currentFrame = 1;
var totalSlides = $("#banner_block ul li").length;
var slideWidth = $("#banner_block ul li").width();
var totalWidth = totalSlides * slideWidth;
$('#banner_block ul').css('width', totalWidth);
var navigate = function(direction) {
currentFrame = (currentFrame >= totalSlides ? 1 : currentFrame+1);
leftPos = (currentFrame == 1) ? 0 : ((currentFrame-1) * slideWidth);
$("#banner_block ul").animate({
left: ( '-' + leftPos )
}, animateSpeed);
};
interval = setInterval(function() {
navigate("next");
}, slideSpeed);
});
Ik snap dat ik een li moet verplaatsen naar de achterkant. Alleen heb jij hier een code voorbeeldje van?
Dank je voor het voorbeeld.
Ik krijg het echter niet aan het werk :(
Ik heb de volgende 4 regels toegevoegd:
Code (php)
1
2
3
4
2
3
4
var firstLi = $('li:first-child', ol),
origin = firstLi;
firstLi.remove();
ol.append(origin);
origin = firstLi;
firstLi.remove();
ol.append(origin);
Deze komt naar de animate naar links.
Echter stopt hij op dit moment na de 2e slide...
Ik besef dat ik wel constant 1000 naar links moet schuiven maar heb even geen oplossing...
In pseudo zou ik iets moeten hebben als:
// Totale breedte is 500px
// Iedere li is 100px
// Toon eerste li
// verplaats eerste li -100px
// tweede li is nu zichtbaar
// eerste li naar achteren verplaatsen
Nu weet ik namelijk weer waarom ik nooit directe code geef, de code wordt fout gekopieerd en verkeerd gebruikt zonder dat de eigenaar weet wat hij doet.
Probeer eerst mijn hele code te begrijpen. Wat uitleg die daarbij kan helpen:
- http://api.jquery.com/remove/
- http://api.jquery.com/append/
- http://api.jquery.com/jQuery/
Toen ik je berichtje las dacht ik...*** je hebt gelijk :P
Ik ken jquery goed genoeg echter ben ik zo dom geweest niet te hebben gezien dat je ol gebruikte ipv ul.
Vanmiddag probeer ik met de ul.
Nog tevens vraagje waar jij misschien/of iemand anders een antwoord op weet.
Als ik een methode in javascript heb (bijv. move())
Deze animate voor mij een element naar links.
ik plaats daarop een alert en doe daarna weer de move()
Hoe komt het dat ik eerst de alert zie en dan pas dat die gaat animeren?
Ik heb namelijk 2 div's gemaakt welke ik naast elkaar heb gezet. Ik animeer beide naar links waarbij de eerste div na de animate achter de tweede div wordt geplaatst.
Dus: [div1][div2] --> animeer naar links --> [div2][div1]