Jquery carousel
Deze carousel doet het niet en ik weet niet waarom kunnen jullie me helpen
Bedankt
mijn code:
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
28
29
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Carousels 1</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<link href="styles.css" rev="stylesheet" rel="stylesheet">
</head>
<body>
<ul id="carousel">
<li><img src="images/image1.PNG" alt="image 1" border="0"></li>
<li><img src="images/image2.PNG" alt="image 2" border="0"></li>
<li><img src="images/image3.PNG" alt="image 3" border="0"></li>
<li><img src="images/image4.PNG" alt="image 4" border="0"></li>
<li><img src="images/image5.PNG" alt="image 5" border="0"></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel ul').each(function() {
var t = setInterval(function() {
$('#carousel ul').animate({marginLeft:-100}, 1000, function() {
$(this).find('li:last').after($(this).find('li:first'));
$(this).css({marginLeft:0});
});
}, 5000);
});
});
</script>
</body>
</html>
<html>
<head>
<title>Carousels 1</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<link href="styles.css" rev="stylesheet" rel="stylesheet">
</head>
<body>
<ul id="carousel">
<li><img src="images/image1.PNG" alt="image 1" border="0"></li>
<li><img src="images/image2.PNG" alt="image 2" border="0"></li>
<li><img src="images/image3.PNG" alt="image 3" border="0"></li>
<li><img src="images/image4.PNG" alt="image 4" border="0"></li>
<li><img src="images/image5.PNG" alt="image 5" border="0"></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel ul').each(function() {
var t = setInterval(function() {
$('#carousel ul').animate({marginLeft:-100}, 1000, function() {
$(this).find('li:last').after($(this).find('li:first'));
$(this).css({marginLeft:0});
});
}, 5000);
});
});
</script>
</body>
</html>
Gewijzigd op 03/12/2010 17:06:43 door Maarten PHP
wat is de error in de errorconsole? aan "het werkt niet" hebben wij natuurlijk ook niets
Onverwacht teken in attribuutselector '!' maar ik gebruik geen ! en regel staat er niet bij
Je kunt overigens ook je HTML wijzigen zodat #carousel wel een child element ul heeft:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div id="carousel">
<ul>
<li><img src="images/image1.PNG" alt="image 1" border="0"></li>
<li><img src="images/image2.PNG" alt="image 2" border="0"></li>
<li><img src="images/image3.PNG" alt="image 3" border="0"></li>
<li><img src="images/image4.PNG" alt="image 4" border="0"></li>
<li><img src="images/image5.PNG" alt="image 5" border="0"></li>
</ul>
</div>
<ul>
<li><img src="images/image1.PNG" alt="image 1" border="0"></li>
<li><img src="images/image2.PNG" alt="image 2" border="0"></li>
<li><img src="images/image3.PNG" alt="image 3" border="0"></li>
<li><img src="images/image4.PNG" alt="image 4" border="0"></li>
<li><img src="images/image5.PNG" alt="image 5" border="0"></li>
</ul>
</div>
Gewijzigd op 04/12/2010 09:09:33 door Lauren Zonneveld
of gewoon alleen #carousel
Niek s op 04/12/2010 14:11:23:
of gewoon alleen #carousel
Goh daar heb ik veel aan
Gnotrgnotr gnotrgnotr op 04/12/2010 21:38:09:
Goh daar heb ik veel aan
Niek s op 04/12/2010 14:11:23:
of gewoon alleen #carousel
Goh daar heb ik veel aan
Ja, want dat is beter dan een extra div om de ul heen zetten puur om de selector werkend te krijgen. Workaround dus. '#carousel' zou ik ook gebruiken.
The Force op 05/12/2010 01:14:21:
Ja, want dat is beter dan een extra div om de ul heen zetten puur om de selector werkend te krijgen. Workaround dus. '#carousel' zou ik ook gebruiken.
Gnotrgnotr gnotrgnotr op 04/12/2010 21:38:09:
Goh daar heb ik veel aan
Niek s op 04/12/2010 14:11:23:
of gewoon alleen #carousel
Goh daar heb ik veel aan
Ja, want dat is beter dan een extra div om de ul heen zetten puur om de selector werkend te krijgen. Workaround dus. '#carousel' zou ik ook gebruiken.
Sorry
Dit gebeurt alleen de eerste maal. Daarna corrigeert het script dit keurig.
2. Is het mogelijk om, i.c.m. een 'style switcher' de waarden voor marginTop e.d. in percentages op te geven?
Ik ben zelf een absolute beginner met jQuery, vandaar deze vraag.
@Kees Hennen: Kan je iets tonen (code/voorbeeld)?
Waarschijnlijk is dit enkel een css probleem.
ik had een carrousel maar die was verkeerd gemaakt en nu wil ik weer een carrousel dus nog niet opgelost
#carousel{
overflow:hidden;
width:100%;
height:100px;
margin:auto;
padding:auto;
background-color:#CCC;
margin-bottom:2em;
}
Het HTML deel:
<div id="carousel">
<ul>
<li><img src="_images/sponsors/abrahams.png" width="90%" /></li>
<li><img src="_images/sponsors/abrahams2.png" width="90%" /></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel ul').each(function()
// Stel de interval op 10 seconden
var t = setInterval(function() {
$('#carousel ul').animate({marginTop:-100}, 1000, function() {
//Deze code werkt als de anitatie klaar is.
$(this).find('li:last').after($(this).find('li:first'));
// Reset de marge nadat het laatste item achteraangezet is.
$(this).css({marginTop:0});
});
}, 5000);
});
});
</script>
</div>